/* 輪切りの紹介サイトの共通スタイル。
   色はストア用の画像（marketing/store-kit-20260926）に合わせ、:root のトークンだけで決める。
   暗い配色はトークンを差し替えるだけにして、部品ごとの色の上書きを作らない。
   site/tools/check-site.mjs がトークンの組み合わせのコントラストを測るので、トークンは不透明な16進で書く。
   外部のフォント・画像は読まない（プライバシーポリシーの「外へ通信しない」とサイトの作りを一致させるため）。 */

:root {
  color-scheme: light dark;

  --bg: #f3f1ea;
  --surface: #fbfaf6;
  --paper: #fffefa;
  --text: #1d3b30;
  --muted: #59675f;
  --primary: #1f6f63;
  --primary-strong: #185a50;
  --primary-soft: #e3eadf;
  --on-primary: #ffffff;
  --line: #dcdfd5;
  --line-strong: #74897f;
  --ring: #d4ded2;
  --focus: #1f6f63;
  --band-bg: #1f6f63;
  --band-text: #ffffff;
  --band-ring: #3b8276;
  --mock-bar: #e7ebe3;
  --mock-dot: #a3b3a5;
  --skeleton: #dfe4dc;
  --skeleton-strong: #9fb2a6;
  --tip-bg: #eaf0e5;
  --tip-line: #376c58;
  --picture-1: #d7e3d9;
  --picture-2: #94b6a4;
  --picture-3: #4b826b;
  --sun: #f4d893;
  --ad-bg: #ead6c4;
  --ad-line: #c9ab8f;
  --ad-text: #5c4532;
  --leftover-bg: #e6eae4;
  --leftover-line: #6f8377;
  --leftover-text: #4c5e52;

  --font: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  /* 狭い幅（〜400px）では左右 16px。広がるほど余白も広げる */
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1120px;
  --radius: 16px;
  --shadow: 0 24px 64px rgba(41, 74, 50, 0.12);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1b17;
    --surface: #15241f;
    --paper: #182a24;
    --text: #e3ebe5;
    --muted: #a3b3aa;
    --primary: #7dc8b7;
    --primary-strong: #a2dccf;
    --primary-soft: #1b342c;
    --on-primary: #0b1d17;
    --line: #283b34;
    --line-strong: #6d887d;
    --ring: #1f332b;
    --focus: #9fdccd;
    --band-bg: #163e36;
    --band-text: #edf5f1;
    --band-ring: #2b5b51;
    --mock-bar: #1d2f28;
    --mock-dot: #4f675d;
    --skeleton: #2a3d36;
    --skeleton-strong: #4f675d;
    --tip-bg: #1c3129;
    --tip-line: #6fae96;
    --picture-1: #2b4038;
    --picture-2: #3f6656;
    --picture-3: #5d9a80;
    --sun: #d9bd72;
    --ad-bg: #4a3727;
    --ad-line: #86684d;
    --ad-text: #f3e2d1;
    --leftover-bg: #222e29;
    --leftover-line: #879a8f;
    --leftover-text: #d3ddd7;
    --shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
  }
}

/* ---------- 土台 ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

[hidden] {
  display: none !important;
}

/* 縦並びにして main を伸ばし、中身が短いページ（404 など）でもフッターを画面の下端に置く。
   フッターの下に地の色の帯を残さないため */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.85;
  letter-spacing: 0.02em;
  line-break: strict;
  overflow-wrap: break-word;
  /* 文節の切れ目で折り返す（「輪/切り」「ませ/ん。」のように語の途中で折らない）。lang="ja" のときに働く。
     どちらも継承するので、段落・箇条書き・表のセル・囲み・ボタンの文字にまとめて効く */
  word-break: auto-phrase;
  text-wrap: pretty;
}

main {
  flex: 1 0 auto;
}

img,
svg {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.5;
  letter-spacing: 0.03em;
  font-weight: 700;
  /* 日本語の見出しを文節の切れ目で折り返す（対応していないブラウザでは普通に折り返すだけ） */
  word-break: auto-phrase;
  text-wrap: balance;
}

p,
ul,
ol,
dl,
table,
pre {
  margin: 0;
}

a {
  color: var(--primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--primary-strong);
  text-decoration-thickness: 2px;
}

code {
  font-family: var(--mono);
  font-size: 0.92em;
}

/* 縁取りは部品の角丸に沿う。ここで border-radius を変えると、丸いボタンが四角くなる */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.container {
  width: 100%;
  max-width: calc(var(--max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* 意味のまとまり（「Chrome 拡張」「このサイトで使う」「GPL-3.0」など）を途中で折り返さない。
   包むのは 360px の列より十分短い語だけなので、狭い幅でも横にはみ出さない */
.nowrap {
  white-space: nowrap;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus {
  top: 12px;
  color: var(--on-primary);
}

.icon {
  width: 24px;
  height: 24px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- ボタン ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  /* 縦の余白は、狭い幅で2行に折れたときに上下が詰まらないためのもの（1行なら min-height で高さが決まる） */
  padding: 10px 24px;
  border: 2px solid var(--primary);
  border-radius: 999px;
  background: transparent;
  color: var(--primary);
  font: inherit;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.button:hover {
  background: var(--primary-soft);
  color: var(--primary);
  text-decoration: none;
}

.button-primary {
  background: var(--primary);
  color: var(--on-primary);
}

.button-primary:hover {
  background: var(--primary-strong);
  border-color: var(--primary-strong);
  color: var(--on-primary);
}

/* ストア公開前に、主ボタン（デモ）の横に置く状態の表示。押せないので、ボタンの形（縁・地の色）にせず、
   時計の印と補助の色の文字だけで「いまの状態」として軽く見せる */
.store-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.store-status .icon {
  width: 20px;
  height: 20px;
  color: var(--primary);
}

@media (prefers-reduced-motion: no-preference) {
  .button,
  a {
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  }
}

/* ---------- 頭とナビ ---------- */

/* 冒頭の弧を頭の後ろまで伸ばすので、頭を弧より手前に出す */
.site-header {
  position: relative;
  z-index: 1;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 76px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  color: var(--text);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-decoration: none;
}

.brand:hover {
  color: var(--text);
}

.brand img {
  width: 36px;
  height: 36px;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  padding: 0;
  list-style: none;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.9375rem;
  /* 全角の括弧「（GPL-3.0）」の前後の空きを詰める */
  font-feature-settings: "palt";
  text-decoration: none;
  /* ラベルを途中で折らない（「ソースコード（GPL-3.0）」など）。リンクは inline-flex なので、
     中の一部を span で包むと別の箱に分かれる。ラベルごと1行に保つ */
  white-space: nowrap;
}

.site-nav a:hover {
  background: var(--primary-soft);
  color: var(--text);
}

/* いまいるページは色と下線だけで示す。太字にすると幅が変わり、隣のリンクがページごとにずれる */
.site-nav a[aria-current="page"] {
  color: var(--text);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.45em;
}

/* 狭い幅では頭のナビを出さない（同じリンクが本文とフッターにある） */
@media (max-width: 759px) {
  .site-nav {
    display: none;
  }
}

/* ---------- 同心円の弧（ストア用の画像と同じ模様） ---------- */

.rings {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.rings::before,
.rings::after {
  content: "";
  position: absolute;
  border: 1px solid var(--ring);
  border-radius: 50%;
}

.rings::before {
  width: 980px;
  height: 980px;
  right: -300px;
  top: -440px;
}

.rings::after {
  width: 800px;
  height: 800px;
  right: -210px;
  top: -350px;
}

/* ---------- 冒頭 ---------- */

/* 下の余白は小さめにし、すぐ下の節の上の余白（.hero + .section）と合わせて約 110px にする。
   幅 1280・高さ 800 の最初の画面に、次の節の見出しまで入る */
.hero {
  position: relative;
  padding-block: clamp(32px, 6vw, 72px) clamp(32px, 3vw, 40px);
}

.hero + .section {
  padding-top: clamp(48px, 6vw, 72px);
}

/* 頭（高さ 76px）の後ろから弧を始める。ストア用の画像と同じく、画面の上端から弧が入る */
.hero .rings {
  top: -76px;
}

/* 下層ページの弧は、頭の下の右隅に小さく描き、本文の列より外（右の余白）だけに出す。
   大きな弧のままだと見出しと本文を横切るため。頭の後ろには描かない（ナビの文字にかかるため）。
   円の中心は頭の下端の右端に置き、列の右端（中央から 20em）から外へ向けて mask で現す。
   狭い幅は列が画面いっぱいなので、弧は出ない */
.page .rings {
  --ring-clear: 20em;
  top: 0;
  -webkit-mask-image: linear-gradient(to right, transparent calc(50% + var(--ring-clear) + 24px), #000 calc(50% + var(--ring-clear) + 160px));
  mask-image: linear-gradient(to right, transparent calc(50% + var(--ring-clear) + 24px), #000 calc(50% + var(--ring-clear) + 160px));
}

.page .rings::before {
  width: 560px;
  height: 560px;
  right: -280px;
  top: -280px;
}

.page .rings::after {
  width: 400px;
  height: 400px;
  right: -200px;
  top: -200px;
}

/* デモは列が広い（--max）ので、そのぶん外側でだけ出す */
.page:has(> .page__inner-wide) .rings {
  --ring-clear: calc(var(--max) / 2);
}

/* 冒頭の弧は、円の下端（画面の上から 540px）まで描く。冒頭の下の余白を詰めても、狭い幅で弧の底が
   冒頭の下端で水平に切れないようにするため。z-index を負にして、次の節のカードと文字の後ろに回す */
.hero .rings {
  bottom: auto;
  height: 620px;
  z-index: -1;
}

.hero__inner {
  position: relative;
  display: grid;
  gap: 48px;
  align-items: center;
}

/* 字間は本文に近い値にする。広げると「C h r o m e」のように英字までばらけて見える */
.eyebrow {
  margin-bottom: 18px;
  color: var(--muted);
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
}

/* 「読みたいところを、」（9文字）は途中で折り返さないので、列の幅に収まる大きさにする。
   360px で 34px（9文字で約 314px、使える幅は 328px）。 */
.hero__title {
  font-size: clamp(2.125rem, 1.2rem + 3.6vw, 3.25rem);
  line-height: 1.45;
  letter-spacing: 0.025em;
  text-wrap: wrap;
}

/* 「読みたいところを、」「すっきり。」の切れ目でだけ折り返す */
.phrase {
  display: inline-block;
}

.hero__lead {
  max-width: 34em;
  margin-top: 24px;
  color: var(--muted);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-top: 32px;
}

.hero__art {
  display: none;
}

@media (min-width: 720px) {
  .hero__art {
    display: block;
    max-width: 640px;
  }
}

@media (min-width: 960px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    gap: 56px;
  }

  /* 2列になると文の列は 960px で約 397px、1440px で約 511px。9文字がそこに収まる大きさ */
  .hero__title {
    font-size: clamp(2.5rem, 4.4vw - 2px, 3.375rem);
  }

  .hero__art {
    max-width: none;
  }
}

/* 冒頭の絵（飾り）。文字を入れず、記事と「止めた広告の跡」だけを形で描く */
.mock {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.mock__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 14px 0 18px;
  background: var(--mock-bar);
}

.mock__bar i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mock-dot);
}

.mock__address {
  flex: 1;
  height: 18px;
  margin-left: 14px;
  border-radius: 999px;
  background: var(--surface);
}

.mock__ext {
  position: relative;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-left: 10px;
  border-radius: 7px;
  background: var(--primary);
  color: var(--on-primary);
}

.mock__ext svg {
  width: 16px;
  height: 16px;
}

.mock__ext::after {
  content: "";
  position: absolute;
  right: -4px;
  bottom: -3px;
  width: 11px;
  height: 11px;
  border: 2px solid var(--mock-bar);
  border-radius: 50%;
  background: var(--sun);
}

.mock__page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34%;
  gap: 18px;
  padding: 22px;
}

.mock__article {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 20px;
  border: 1px solid var(--line);
  background: var(--paper);
}

.mock__article span {
  display: block;
  height: 7px;
  border-radius: 4px;
  background: var(--skeleton);
}

.mock__article .mock__kicker {
  width: 34%;
  height: 6px;
  margin-bottom: 4px;
}

.mock__article .mock__heading {
  width: 78%;
  height: 13px;
  background: var(--skeleton-strong);
}

.mock__article .mock__heading + .mock__heading {
  width: 56%;
  margin-bottom: 6px;
}

.mock__article .mock__short {
  width: 64%;
}

.mock__article .mock__picture {
  position: relative;
  height: auto;
  aspect-ratio: 16 / 6;
  margin-block: 6px;
  border-radius: 0;
  background: linear-gradient(160deg, var(--picture-1) 0 48%, var(--picture-2) 48% 63%, var(--picture-3) 63%);
}

.mock__article .mock__sun {
  position: absolute;
  right: 12%;
  top: 14%;
  width: 9%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--sun);
}

.mock__aside {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mock__tip {
  height: 84px;
  border-top: 3px solid var(--tip-line);
  background: var(--tip-bg);
}

/* 止めた広告の跡。点線の枠に「禁止」の印だけを薄く置く */
.mock__gone {
  display: grid;
  flex: 1;
  place-items: center;
  min-height: 130px;
  border: 2px dashed var(--line-strong);
  border-radius: 10px;
  color: var(--primary);
}

.mock__gone svg {
  width: 44px;
  height: 44px;
  opacity: 0.7;
}

/* ---------- 節 ---------- */

.section {
  padding-block: clamp(56px, 8vw, 104px);
}

.section + .section {
  padding-top: 0;
}

.section__title {
  font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2rem);
}

.section__title::before {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  margin-bottom: 18px;
  border-radius: 2px;
  background: var(--primary);
}

.section__lead {
  max-width: 40em;
  margin-top: 16px;
  color: var(--muted);
}

/* できること（5枚）。広い幅は 3＋2、中くらいは 2 列、狭い幅は縦積み */
.features {
  display: grid;
  gap: 16px;
  margin-top: 36px;
  padding: 0;
  list-style: none;
}

.feature {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.feature__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 6px;
  border-radius: 14px;
  background: var(--primary-soft);
  color: var(--primary);
}

.feature__title {
  font-size: 1.125rem;
}

.feature p {
  color: var(--muted);
}

@media (min-width: 640px) {
  .features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .feature:last-child {
    grid-column: 1 / -1;
  }
}

@media (min-width: 960px) {
  .features {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 20px;
  }

  .feature {
    grid-column: span 2;
  }

  .feature:nth-child(n + 4),
  .feature:last-child {
    grid-column: span 3;
  }
}

/* 閲覧履歴の約束（帯） */
.band {
  position: relative;
  overflow: hidden;
  padding-block: clamp(56px, 8vw, 96px);
  background: var(--band-bg);
  color: var(--band-text);
}

.band .rings::before,
.band .rings::after {
  border-color: var(--band-ring);
}

.band .rings::before {
  right: -380px;
  top: -520px;
}

.band .rings::after {
  right: -290px;
  top: -430px;
}

.band__inner {
  position: relative;
}

.band__text {
  max-width: 820px;
}

.band h2 {
  font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.25rem);
}

.band p {
  margin-top: 18px;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
}

.band .button {
  margin-top: 28px;
  border-color: var(--band-text);
  color: var(--band-text);
}

.band .button:hover {
  background: var(--band-text);
  color: var(--band-bg);
}

/* 冒頭のすぐ下に帯を置くので、冒頭の下の余白（32〜40px）に足して、ボタンと帯の間を空ける */
.hero + .band {
  margin-top: clamp(16px, 4vw, 48px);
}

/* 約束の帯の中にも運営者を出す（「誰が約束しているか」を、ここで確かめられるように） */
.band .band__operator {
  margin-top: 20px;
  font-size: 0.9375rem;
}

.band :focus-visible {
  outline-color: var(--band-text);
}

/* 有料版（準備中）。値段は出さない */
.plans {
  display: grid;
  gap: 12px;
  margin-top: 32px;
  padding: 0;
  list-style: none;
}

/* 同じ段のカードは高さがそろうが、中身は上に詰める（短いカードで説明が下へずれないように） */
.plan {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.plan__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--primary-soft);
  color: var(--muted);
}

.plan__icon .icon {
  width: 20px;
  height: 20px;
}

/* 見出し → 札 → 説明の順に積む。札は見出しの長さによらず、どのカードでも見出しのすぐ下の行に出る。
   上の余白は、見出しの1行目を印（40px）の高さの中ほどにそろえるためのもの */
.plan__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  padding-top: 7px;
}

.plan h3 {
  font-size: 1.0625rem;
}

.plan p {
  color: var(--muted);
  font-size: 0.9375rem;
}

.tag {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border: 1px dashed var(--line-strong);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

@media (min-width: 760px) {
  .plans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

/* 1列の幅では、印は見出しと札の横にだけ置き、説明は札の下に横いっぱいで出す。
   印（40px＋間 14px）のぶん説明の行が短くならないように。見出しと札の順番は広い幅と同じ */
@media (max-width: 759px) {
  .plan {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 6px 14px;
  }

  .plan__body {
    display: contents;
  }

  .plan__icon {
    grid-row: 1 / span 2;
  }

  .plan h3 {
    grid-column: 2;
    padding-top: 7px;
  }

  .plan .tag {
    grid-column: 2;
    justify-self: start;
  }

  .plan p {
    grid-column: 1 / -1;
    margin-top: 6px;
  }
}

/* 手順のカード（紹介ページの入れ方と、デモの操作で同じ部品）。どの幅でも番号が左・文が右 */
.steps {
  display: grid;
  gap: 16px;
  margin-top: 32px;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.step {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  counter-increment: step;
}

.step::before {
  content: counter(step);
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--on-primary);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}

/* 文の1行目（行の高さ 29.6px）を、番号の円（40px）の中ほどにそろえる */
.step p {
  padding-top: 5px;
}

/* 手順1の下の「審査中」（ストア公開前だけ）。冒頭と同じ部品を、文の下の行に出す */
.step .store-status {
  display: flex;
  margin-top: 10px;
  padding-top: 0;
}

/* 狭い幅では、番号を1行目の頭に置き、2行目からは文を横いっぱいに流す。
   番号の列（40px＋間 16px）のぶん、どの行も短くならないように。番号の円の外形の高さ（29px）を
   1行の高さ（29.6px）より低くして、2行目からは番号の下にも文が回り込む */
@media (max-width: 639px) {
  .step {
    display: flow-root;
  }

  .step::before {
    float: left;
    width: 32px;
    height: 32px;
    margin: -1px 12px -2px 0;
    font-size: 0.9375rem;
  }

  .step p {
    padding-top: 0;
  }
}

/* 3枚を横に並べるのは 1024px から。それより狭いと文の列が 150px ほどになり、
   折らない語（「Chrome ウェブストア」「要素を指定して消す」など）がカードからはみ出す */
@media (min-width: 1024px) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }
}

/* 困ったとき（症状 → 対処）。角丸は表そのものより外側の箱で切るほうが確実 */
.fixes-wrap {
  margin-top: 32px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.fixes {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.fixes th,
.fixes td {
  padding: 18px 22px;
  text-align: left;
  vertical-align: top;
}

.fixes thead th {
  background: var(--primary-soft);
  color: var(--text);
  font-size: 0.875rem;
  letter-spacing: 0.12em;
}

.fixes tbody th {
  width: 34%;
  font-weight: 700;
}

.fixes tbody td {
  color: var(--muted);
}

.fixes tbody tr + tr > * {
  border-top: 1px solid var(--line);
}

/* 「症状 → 対処」の向きは、見出しの行にだけ薄い矢印で示す。行ごとに印を置くと、押せる行に見えるため。
   文字を持たない飾りなので読み上げには出ない（aria-hidden と同じ扱い） */
.fixes thead th + th {
  position: relative;
}

.fixes thead th + th::before {
  content: "";
  position: absolute;
  left: -11px;
  top: 50%;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  background: var(--muted);
  opacity: 0.5;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M4 11h13.5M13 6.5l4.5 4.5-4.5 4.5' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M4 11h13.5M13 6.5l4.5 4.5-4.5 4.5' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* 狭い幅では1行ずつ「症状」の下に「対処」を積む */
@media (max-width: 639px) {
  .fixes,
  .fixes tbody,
  .fixes tr,
  .fixes th,
  .fixes td {
    display: block;
    width: auto;
  }

  .fixes thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .fixes tbody th {
    width: auto;
    padding: 18px 18px 4px;
  }

  .fixes tbody td {
    padding: 0 18px 18px;
  }

  .fixes tbody tr + tr > * {
    border-top: 0;
  }

  .fixes tbody tr + tr {
    border-top: 1px solid var(--line);
  }
}

/* ---------- 共有（assets/share.js が中身を作る） ---------- */

.share__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.share__button {
  min-height: 44px;
  padding: 8px 20px;
  font-weight: 700;
}

.share__button[data-done="true"] {
  background: var(--primary-soft);
}

.share__said {
  min-height: 1.85em;
  margin-top: 10px;
  color: var(--text);
  overflow-wrap: anywhere;
}

.share__note {
  max-width: 44em;
  color: var(--muted);
  font-size: 0.9375rem;
}

/* ---------- 下層ページの本文 ---------- */

.page {
  position: relative;
  padding-block: clamp(32px, 5vw, 64px) clamp(56px, 8vw, 96px);
}

/* 本文の列は約 40em（1行 35〜45 字）。これより広いと、行の頭へ目を戻すのがつらくなる */
.page__inner {
  position: relative;
  max-width: calc(40em + var(--gutter) * 2);
}

.page__inner-wide {
  max-width: calc(var(--max) + var(--gutter) * 2);
}

.page__title {
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
}

.prose > * + * {
  margin-top: 16px;
}

.prose h2 {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
}

.prose h2 + * {
  margin-top: 14px;
}

.prose ul,
.prose ol {
  padding-left: 1.4em;
}

.prose li + li {
  margin-top: 6px;
}

.prose li::marker {
  color: var(--primary);
}

/* 囲み（プライバシーの冒頭の要約と、デモの注意で同じ部品）。薄い緑の地・細い縁・左に印。
   文字は本文と同じ太さにする（全文を太字にすると、どこが大事かがかえって分からなくなる） */
.callout {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-top: 24px;
  padding: 20px 22px;
  border: 1px solid var(--primary);
  border-radius: var(--radius);
  background: var(--primary-soft);
  color: var(--text);
}

/* 印（24px）を文の1行目（行の高さ 29.6px）の中ほどにそろえる */
.callout .icon {
  margin-top: 3px;
  color: var(--primary);
}

.prose > .callout + * {
  margin-top: 24px;
}

/* 狭い幅では、印を1行目の頭に置き、2行目からは文を囲みの幅いっぱいに流す（印の列のぶん行が短くならないように）。
   印の外形の高さ（27px）は1行の高さ（29.6px）より低いので、回り込むのは1行目だけ */
@media (max-width: 639px) {
  .callout {
    display: block;
  }

  .callout .icon {
    float: left;
    margin: 3px 10px 0 0;
  }
}

.dated {
  margin-top: 40px;
  color: var(--muted);
}

/* ソースのページ */
.download {
  display: grid;
  gap: 18px;
  margin-top: 28px;
  padding: clamp(16px, 4vw, 24px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.download dt {
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.download dd {
  margin: 6px 0 0;
}

/* ボタンの中はファイル名だけにする。幅 360px でも1行に収まるよう、左右の余白と印との間を少し詰める */
.download .button {
  gap: 8px;
  max-width: 100%;
  padding-inline: 20px;
  overflow-wrap: anywhere;
}

/* 大きさはボタンの下に小さく出す（ボタンに入れると、狭い幅で2行に折れて上下が詰まる）。
   行の頭の全角括弧の空きは palt で詰める */
.download__size {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.875rem;
  font-feature-settings: "palt";
}

.hash {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--bg);
  font-size: 0.875rem;
  line-height: 1.6;
  word-break: break-all;
}

pre {
  overflow-x: auto;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  font-family: var(--mono);
  font-size: 0.9375rem;
  line-height: 1.7;
}

pre code {
  font-size: inherit;
}

.prose p > code,
.parts code {
  white-space: nowrap;
}

.parts li {
  overflow-wrap: anywhere;
}

/* ---------- デモのページ ---------- */

/* 注意の囲み（.callout）と操作の手順（.steps）は、プライバシー・紹介ページと同じ部品を使う */
.demo-title {
  margin-top: 48px;
}

/* 架空の記事を載せる舞台。上の帯（文字なし）でブラウザの中のページに見せる。
   広告の枠が消えても隙間が残らないよう、中の余白は gap だけで作る */
.stage {
  margin-top: 48px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--bg);
  box-shadow: var(--shadow);
}

.stage__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 18px;
  background: var(--mock-bar);
}

.stage__bar i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mock-dot);
}

.stage__body {
  display: grid;
  gap: 20px;
  padding: clamp(16px, 3vw, 28px);
}

.stage__layout {
  display: grid;
  gap: 20px;
}

@media (min-width: 840px) {
  .stage__layout {
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: start;
  }
}

.tea {
  padding: clamp(20px, 3.5vw, 36px);
  border: 1px solid var(--line);
  background: var(--paper);
}

.tea h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
}

.tea__picture {
  position: relative;
  height: 140px;
  margin-block: 20px;
  background: linear-gradient(160deg, var(--picture-1) 0 48%, var(--picture-2) 48% 63%, var(--picture-3) 63%);
}

.tea__picture::after {
  content: "";
  position: absolute;
  right: 12%;
  top: 18px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--sun);
}

.tea p {
  color: var(--muted);
}

.tea p + p {
  margin-top: 12px;
}

.tea-side {
  display: grid;
  gap: 16px;
}

/* 広告の枠（デモ）。名前は輪切りのフィルタに当たるもの。ページのほかの部品には使わない */
.ad-in-feed-list,
ins.adsbygoogle {
  display: grid;
  place-items: center;
  padding: 18px;
  border: 1px solid var(--ad-line);
  background: var(--ad-bg);
  color: var(--ad-text);
  font-size: 0.9375rem;
  letter-spacing: 0.08em;
  text-align: center;
  text-decoration: none;
}

ins.adsbygoogle {
  min-height: 220px;
}

#leftover-ad {
  padding: 22px;
  border: 2px dashed var(--leftover-line);
  background: var(--leftover-bg);
  color: var(--leftover-text);
  line-height: 1.9;
}

/* 追従広告（デモ）。demo/js/fixed_ad.js が差し込む。
   出ているあいだは、フッターの下に帯の高さ（下 12px＋高さ約 64px）より広い余白を足し、フッターの文字が帯に隠れないようにする。
   余白は body ではなくフッターに足す（body に足すと、フッターの下に地の色の帯が出る） */
.has-demo-follow .site-footer {
  padding-bottom: 88px;
}

.demo-follow {
  position: fixed;
  left: 50%;
  bottom: 12px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: min(720px, calc(100% - 24px));
  padding: 10px 10px 10px 20px;
  border: 1px solid var(--ad-line);
  border-radius: 12px;
  background: var(--ad-bg);
  color: var(--ad-text);
  box-shadow: var(--shadow);
  transform: translateX(-50%);
}

.demo-follow__text {
  letter-spacing: 0.08em;
}

.demo-follow__close {
  flex: none;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--ad-text);
  border-radius: 999px;
  background: transparent;
  color: var(--ad-text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

/* 地の茶色（--ad-line）に替えると文字のコントラストが 4.5:1 を切るので、紙の色にする */
.demo-follow__close:hover {
  background: var(--paper);
}

.demo-follow__close:focus-visible {
  outline-color: var(--ad-text);
}

/* ---------- 404 ---------- */

.lost__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* ---------- フッター ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-size: 0.9375rem;
}

.site-footer__inner {
  display: grid;
  gap: 24px 48px;
  padding-block: 40px 48px;
}

.site-footer .brand {
  font-size: 1.125rem;
}

.site-footer .brand img {
  width: 28px;
  height: 28px;
}

.site-footer ul {
  padding: 0;
  list-style: none;
}

.site-footer__facts {
  margin-top: 8px;
}

.site-footer__facts a {
  overflow-wrap: anywhere;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
  align-content: start;
}

/* 全角の括弧「（GPL-3.0）」の前後の空きを詰める（下線が括弧の外まで伸びて見えないように） */
.site-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-feature-settings: "palt";
  white-space: nowrap;
}

.site-footer__notes {
  display: grid;
  gap: 6px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  line-height: 1.8;
}

@media (min-width: 760px) {
  .site-footer__inner {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .site-footer__notes {
    grid-column: 1 / -1;
  }
}