@charset "utf-8";

/* Webデザインの図解リファレンス
 *
 * 版面は shell（nav ｜ main）が決める。本文・見出し・表・リストに幅は持たせない。
 * 右の欄（ページ内目次）は 2026-08-27 にやめた。3列で本文が窮屈だったため、
 * 目次は本文の頭へ横並びで置く（依頼者の指摘）。
 * 図版だけが main の幅いっぱいまで出る。
 * 明暗は端末の設定に従う。図版の SVG が prefers-color-scheme を内蔵しているため、
 * ページ側だけを切り替える手動トグルは置かない（図と地がずれるので）。
 */

:root {
  color-scheme: light dark;
  /* 図版の SVG と同じトークン。地の色が図の地と一致するので図が浮かない */
  --bg:      #fbfaf8;
  --paper:   #f3efe8;   /* 面 */
  --ink:     #1c1a17;
  --mut:     #6f6a62;   /* 本文サイズで 5.1:1。図版の #8b867e は図の中だけで使う */
  --faint:   #78726a;   /* 補助の補助。これでも 4.56:1 で本文サイズに耐える */
  --line:    #d8d2c7;
  --edge:    #78726a;   /* 操作できるものの輪郭。4.56:1。罫線用の --line は 1.44:1 で足りない */
  --rule:    #1c1a17;   /* 章を切る太い罫 */
  --acc:     #025dcc;   /* AK²Labの識別色 */
  --acc-ink: #025dcc;   /* 文字・リンク。明るい地で5.7:1以上 */
  --bad:     #a2382a;
  --code:    #efeae1;
  --sel:     #f0dcc6;
  --find-bg: #ffe27a;
  --find-ink:#1c1a17;
  --brand:   #025dcc;

  --u: 4px;                         /* 縦のリズムの単位 */
  --gap: calc(var(--u) * 8);        /* 32px */
  --nav-w: 18rem;
  --page: 80rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:      #171614;
    --paper:   #201e1b;
    --ink:     #e9e6e1;
    --mut:     #a49d93;
    --faint:   #8f8a82;
    --line:    #3b3833;
    --edge:    #8f8a82;   /* 暗い地で 5.27:1 */
    --rule:    #e9e6e1;
    --acc:     #69b7ff;
    --acc-ink: #69b7ff;
    --bad:     #d4705f;
    --code:    #232120;
    --sel:     #4a3624;
    --find-bg: #8a6a00;
    --find-ink:#ffffff;
    --brand:   #69b7ff;
  }
}

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

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-padding-block-start: calc(var(--u) * 6);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", "Yu Gothic",
               system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.9;
  font-feature-settings: "palt" 1;
  text-underline-offset: 0.18em;
  text-wrap: pretty;
}

::selection { background: var(--sel); }

.visually-hidden {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

mark,
.find-hit {
  color: var(--find-ink);
  background: var(--find-bg);
  padding-inline: 0.08em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ---- 骨格 ------------------------------------------------------------ */

.shell {
  max-inline-size: var(--page);
  margin-inline: auto;
  display: grid;
  grid-template-columns: var(--nav-w) minmax(0, 1fr);
  column-gap: calc(var(--u) * 10);
  align-items: start;
}

.skip {
  position: absolute;
  inset-inline-start: -9999px;
}
.skip:focus {
  inset-inline-start: calc(var(--u) * 4);
  inset-block-start: calc(var(--u) * 4);
  z-index: 50;
  background: var(--ink);
  color: var(--bg);
  padding: calc(var(--u) * 2) calc(var(--u) * 4);
}

/* ---- 左：分野ナビ ----------------------------------------------------- */

.nav {
  position: sticky;
  inset-block-start: 0;
  max-block-size: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-inline-end: 1px solid var(--line);
}
.nav-in { padding: calc(var(--u) * 5) calc(var(--u) * 6) calc(var(--u) * 6); }
.nav > summary {
  display: flex;
  gap: calc(var(--u) * 4);
  align-items: baseline;
  justify-content: space-between;
  padding: calc(var(--u) * 4) 0;
  cursor: pointer;
  list-style: none;
  border-block-end: 1px solid var(--line);
}
.nav > summary::-webkit-details-marker { display: none; }
.sum-b { font-weight: 700; font-size: 0.9375rem; }
.sum-k {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: var(--mut);
  white-space: nowrap;
  border-block-end: 1px solid currentColor;
}
.nav[open] > summary .sum-k::after { content: "を閉じる"; }
.nav:not([open]) > summary .sum-k::after { content: "を開く"; }

.brand {
  display: block;
  color: inherit;
  text-decoration: none;
  line-height: 1.35;
  margin-block-end: calc(var(--u) * 5);
}
.brand b {
  display: block;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.brand span {
  display: block;
  font-size: 0.75rem;
  color: var(--mut);
  letter-spacing: 0.08em;
  margin-block-start: calc(var(--u));
}

.nav-h {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--mut);
  margin: calc(var(--u) * 5) 0 calc(var(--u) * 2);
  padding-block-end: calc(var(--u));
  border-block-end: 1px solid var(--line);
}
.nav-h:first-of-type { margin-block-start: 0; }

.nav ol { list-style: none; margin: 0; padding: 0; }
.nav li { margin: 0; }
.nav ol a {
  display: block;
  position: relative;
  padding: calc(var(--u) * 0.75) 0;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.875rem;
  line-height: 1.5;
}
.nav ol a:hover { color: var(--acc-ink); }
.nav ol a[aria-current] { font-weight: 700; }
.nav ol a[aria-current]::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(var(--u) * -3.5);
  inset-block-start: 0.85em;
  inline-size: calc(var(--u) * 2.5);
  border-block-start: 2px solid var(--acc);
}

/* ---- 中：本文 --------------------------------------------------------- */

.main {
  padding: calc(var(--u) * 9) 0 calc(var(--u) * 24);
  min-inline-size: 0;
}

.crumb {
  font-size: 0.8125rem;
  color: var(--mut);
  margin-block-end: calc(var(--u) * 4);
}
.crumb a { color: var(--mut); }
.crumb a:hover { color: var(--acc-ink); }
/* 区切りは装飾だが、読み上げには届いてしまう。目にも届く濃さにする
   （--line は明 1.44:1・暗 1.55:1 で、この資料自身の基準を割っていた） */
.crumb i { font-style: normal; padding-inline: 0.5em; color: var(--mut); }

h1 {
  font-size: clamp(1.75rem, 1.35rem + 1.4vw, 2.25rem);
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.005em;
  margin: 0 0 calc(var(--u) * 4);
}

.lead {
  font-size: 1.0625rem;
  color: var(--mut);
  margin: 0 0 calc(var(--u) * 8);
  padding-block-end: calc(var(--u) * 5);
  border-block-end: 1px solid var(--line);
}
.lead a { color: var(--acc-ink); }

h2 {
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.01em;
  margin: calc(var(--u) * 11) 0 calc(var(--u) * 4);
  padding-block-start: calc(var(--u) * 2.5);
  border-block-start: 2px solid var(--rule);
}
h2:first-child { margin-block-start: 0; }

h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: calc(var(--u) * 8) 0 calc(var(--u) * 2);
}

.anchor {
  margin-inline-start: 0.5em;
  color: var(--line);
  text-decoration: none;
  font-weight: 400;
  opacity: 0;
  transition: opacity 120ms;
}
h2:hover .anchor, h3:hover .anchor, .anchor:focus-visible { opacity: 1; color: var(--mut); }

p { margin: calc(var(--u) * 3) 0; }

a { color: var(--acc-ink); text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }

b, strong { font-weight: 700; }

:focus-visible {
  outline: 2px solid var(--acc-ink);
  outline-offset: 2px;
}

/* ---- ひと目で（定義リスト） -------------------------------------------- */

dl.terms {
  margin: calc(var(--u) * 4) 0;
  display: grid;
  grid-template-columns: minmax(6rem, max-content) 1fr;
  column-gap: calc(var(--u) * 6);
  border-block-start: 1px solid var(--line);
}
dl.terms dt {
  grid-column: 1;
  font-weight: 700;
  padding: calc(var(--u) * 2) 0;
  border-block-end: 1px solid var(--line);
}
dl.terms dd {
  grid-column: 2;
  margin: 0;
  color: var(--ink);
  padding: calc(var(--u) * 2) 0;
  border-block-end: 1px solid var(--line);
}
dl.terms dt b { font-weight: 700; }

/* ---- 間違えやすいところ ------------------------------------------------ */

ul.pitfalls { list-style: none; margin: calc(var(--u) * 4) 0; padding: 0; }
ul.pitfalls li.pitfall {
  display: grid;
  grid-template-columns: 1.4rem minmax(0, 1fr);
  column-gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 2.5) 0;
  border-block-end: 1px solid var(--line);
}
ul.pitfalls li.pitfall:first-child { border-block-start: 1px solid var(--line); }
.pf-x { color: var(--bad); font-weight: 700; line-height: 1.9; }
.pf-wrong { grid-column: 2; }
.pf-right {
  grid-column: 2;
  color: var(--mut);
  font-size: 0.9375rem;
  padding-inline-start: 1.2em;
  position: relative;
}
.pf-right::before {
  content: "→";
  position: absolute;
  inset-inline-start: 0;
  color: var(--acc);
}

/* ---- 関連 -------------------------------------------------------------- */

ul.related { list-style: none; margin: calc(var(--u) * 4) 0; padding: 0; }
ul.related li {
  padding: calc(var(--u) * 2) 0;
  border-block-end: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 0 calc(var(--u) * 3);
  align-items: baseline;
}
ul.related li:first-child { border-block-start: 1px solid var(--line); }
ul.related a { font-weight: 700; text-decoration: none; }
ul.related a:hover { text-decoration: underline; }
.rel-note { color: var(--mut); font-size: 0.875rem; }

/* ---- 一般のリスト ------------------------------------------------------ */

ul, ol { margin: calc(var(--u) * 3) 0; padding-inline-start: 1.35em; }
li { margin: calc(var(--u) * 1) 0; }
li::marker { color: var(--faint); }

/* ---- 表 ---------------------------------------------------------------- */

.tablewrap { overflow-x: auto; margin: calc(var(--u) * 4) 0; }
.tablewrap:focus-visible { outline: 2px solid var(--acc-ink); outline-offset: 3px; }

table {
  border-collapse: collapse;
  inline-size: 100%;
  font-size: 0.9375rem;
  line-height: 1.7;
  font-variant-numeric: tabular-nums;
}
thead th {
  text-align: start;
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--mut);
  padding: 0 calc(var(--u) * 3) calc(var(--u) * 1.5) 0;
  border-block-end: 2px solid var(--rule);
  white-space: nowrap;
}
tbody td {
  padding: calc(var(--u) * 2.5) calc(var(--u) * 3) calc(var(--u) * 2.5) 0;
  border-block-end: 1px solid var(--line);
  vertical-align: top;
}
tbody tr:last-child td { border-block-end: 0; }
thead th:last-child, tbody td:last-child { padding-inline-end: 0; }
table.cols-2 td:first-child { inline-size: 38%; }
table.cols-2 th:first-child { inline-size: 38%; }

/* ---- 図版 -------------------------------------------------------------- */

.fig { margin: calc(var(--u) * 6) 0; }
.fig img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  border: 1px solid var(--line);
}
.fig figcaption {
  margin-block-start: calc(var(--u) * 2);
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--mut);
}
.fig-photo img { background: var(--paper); min-block-size: 8rem; }

/* ---- 引用 --------------------------------------------------------------- */

aside.note {
  margin: calc(var(--u) * 5) 0;
  padding: calc(var(--u) * 4) calc(var(--u) * 5);
  background: var(--paper);
  border-inline-start: 2px solid var(--line);
  font-size: 0.875rem;
  line-height: 1.8;
  color: var(--mut);
}
aside.note p { margin: 0 0 calc(var(--u) * 2); }
aside.note p:last-child { margin-block-end: 0; }
aside.note ul { margin: calc(var(--u) * 2) 0 0; }
aside.note b { color: var(--ink); }

/* ---- コード ------------------------------------------------------------ */

code {
  font-family: ui-monospace, "SFMono-Regular", Consolas, "Roboto Mono", monospace;
  font-size: 0.875em;
  background: var(--code);
  padding: 0.1em 0.35em;
}
pre {
  margin: calc(var(--u) * 4) 0;
  padding: calc(var(--u) * 4) calc(var(--u) * 5);
  background: var(--code);
  /* 長いコードでページが縦に伸びると、その先の節へ辿り着けない。
     枠の中で送る（コピーは全文が対象なので、送っても取り逃がさない） */
  max-block-size: 34rem;
  overflow: auto;
  border-inline-start: 2px solid var(--line);
}
@media print { pre { max-block-size: none; overflow: visible; } }
pre code {
  background: none;
  padding: 0;
  font-size: 0.8125rem;
  line-height: 1.75;
}
pre:focus-visible { outline: 2px solid var(--acc-ink); outline-offset: 3px; }

hr { border: 0; border-block-start: 1px solid var(--line); margin: calc(var(--u) * 10) 0; }

/* ---- ページ末：前後と分野内の一覧 ---------------------------------------- */

.pager {
  margin-block-start: calc(var(--u) * 14);
  padding-block-start: calc(var(--u) * 4);
  border-block-start: 2px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--u) * 6);
}
.pager a {
  text-decoration: none;
  color: var(--ink);
  display: block;
  padding: calc(var(--u) * 2) 0;
}
.pager a:hover .pg-t { color: var(--acc-ink); text-decoration: underline; }
.pg-k { display: block; font-size: 0.75rem; letter-spacing: 0.1em; color: var(--mut); }
.pg-t { display: block; font-weight: 700; margin-block-start: calc(var(--u)); }
.pager .next { text-align: end; grid-column: 2; }

/* ---- 右：ページ内の目次 -------------------------------------------------- */

.rail {
  position: sticky;
  inset-block-start: 0;
  padding: calc(var(--u) * 9) 0 calc(var(--u) * 8);
  max-block-size: 100dvh;
  overflow-y: auto;
  font-size: 0.8125rem;
}
.rail-h {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--mut);
  margin: 0 0 calc(var(--u) * 2);
  padding: 0 0 calc(var(--u));
  border: 0;
  border-block-end: 1px solid var(--line);
}
.rail ul { list-style: none; margin: 0; padding: 0; }
.rail li { margin: 0; }
.rail a {
  display: block;
  padding: calc(var(--u) * 1.25) 0;
  color: var(--mut);
  text-decoration: none;
  line-height: 1.5;
}
.rail a:hover { color: var(--acc-ink); }
.rail .lv3 { padding-inline-start: calc(var(--u) * 3); }

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

.foot {
  grid-column: 1 / -1;
  padding: calc(var(--u) * 4) 0 calc(var(--u) * 10);
  font-size: 0.8125rem;
  color: var(--mut);
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 2) calc(var(--u) * 8);
  align-items: baseline;
}
.foot a { color: var(--mut); }
.foot a:hover { color: var(--acc-ink); }
.foot .sig { margin-inline-start: auto; }

/* ---- トップページ ------------------------------------------------------- */

.hero {
  border-block-end: 2px solid var(--rule);
  padding-block-end: calc(var(--u) * 7);
  margin-block-end: calc(var(--u) * 8);
}
.hero h1 {
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3rem);
  line-height: 1.24;
  letter-spacing: -0.005em;
  max-inline-size: 18em;
}
.hero .lead {
  border: 0;
  padding: 0;
  margin-block-end: 0;
  font-size: 1.0625rem;
}

.routes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0;
  border-block-start: 1px solid var(--line);
}
.routes > a {
  display: block;
  padding: calc(var(--u) * 5) calc(var(--u) * 5) calc(var(--u) * 6) 0;
  border-block-end: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
}
.routes > a:hover .r-t { color: var(--acc-ink); text-decoration: underline; }
.r-t { display: block; font-weight: 700; font-size: 1.0625rem; }
.r-d { display: block; color: var(--mut); font-size: 0.875rem; margin-block-start: calc(var(--u)); }

/* ---- 狭い画面 ----------------------------------------------------------- */

@media (max-width: 900px) {
  :root { --gap: calc(var(--u) * 5); }
  /* 1列。グリッドのままだとナビの領域が自分の高さしかなく、貼り付かない */
  .shell {
    display: block;
    padding-inline: calc(var(--u) * 5);
  }
  /* 目次は画面の上に残す。5,000px ある本文の途中から、
     先頭まで戻らずに別のページへ移れるように。
     地と同じ色だと、開いたときにどこまでが目次か分からない。面の色に変え、
     終わりを太罫で切る。面の上でも 4.5:1 を保つよう、2つの色だけ濃くする */
  .nav {
    z-index: 20;
    background: var(--paper);
    /* 画面の上に貼り付く帯なので、面は端まで届かせる。
       shell の左右パディングを打ち消して、同じ量を自分で持つ。
       中の文字は本文と同じ位置に揃う */
    margin-inline: calc(var(--u) * -5);
    padding-inline: calc(var(--u) * 5);
    --acc-ink: #025dcc;
    --faint:   #6f6a62;   /* 同 4.68:1。地の値 #78726a だと 4.15 */
    border-inline-end: 0;
    border-block-end: 2px solid var(--rule);
  }
  .nav-in { padding: calc(var(--u) * 2) 0 calc(var(--u) * 5); }
  .nav .brand { display: none; }
  .nav-find { margin-block-end: calc(var(--u) * 4); }
  .nav-h { margin-block-start: calc(var(--u) * 5); }
  .nav ol {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    column-gap: calc(var(--u) * 5);
  }
  .main { padding-block-start: calc(var(--u) * 7); }
  dl.terms { grid-template-columns: minmax(0, 1fr); }
  dl.terms dt, dl.terms dd { grid-column: 1; }
  dl.terms dt { border-block-end: 0; padding-block-end: 0; }
  dl.terms dd { padding-block-start: 0; }
  ul.pitfalls li.pitfall { grid-template-columns: 1.2rem minmax(0, 1fr); }
  .pager { grid-template-columns: minmax(0, 1fr); }
  .pager .next { text-align: start; grid-column: 1; }
  table.cols-2 td:first-child, table.cols-2 th:first-child { inline-size: auto; }
}

/* 暗い表示では、面の上でも元の値で 4.5:1 を満たす（acc-ink 6.54 / faint 4.85）。
   明るい表示のために濃くした2つを、ここで戻す */
@media (max-width: 900px) and (prefers-color-scheme: dark) {
  .nav { --acc-ink: #69b7ff; --faint: #8f8a82; }
}

@media (min-width: 901px) {
  .shell { padding-inline: calc(var(--u) * 8); }
  /* 縦に26行あると、高さ900pxの画面では分野の後半が枠の外に出てしまう。
     2段に畳んで、13分野すべてを最初の画面に収める */
  .nav ol.nav-two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: calc(var(--u) * 4);
  }
  html.js .nav > summary { display: none; }
  .nav > summary { border-block-end: 0; }
}

/* ---- 印刷 --------------------------------------------------------------- */

@media print {
  :root { --bg: #fff; --ink: #000; --mut: #444; --line: #999; --rule: #000; }
  .nav, .rail, .pager, .skip { display: none; }
  .nav > summary { display: none; }
  .shell { display: block; max-inline-size: none; padding: 0; }
  body { font-size: 10.5pt; line-height: 1.7; }
  h1 { font-size: 18pt; }
  h2 { font-size: 13pt; break-after: avoid; }
  .fig, table, pre { break-inside: avoid; }
  a { color: #000; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #555; }
  .foot { border: 0; }
}

/* ---- 逆引き ------------------------------------------------------------- */

.rx-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: calc(var(--u) * 4);
  margin-block: calc(var(--u) * 6) calc(var(--u) * 4);
}
.rx-filter {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 2);
  flex: 1 1 20rem;
  min-inline-size: 0;   /* 入力欄の既定幅（20字）を親に押し付けさせない */
}
.rx-filter span { font-size: 0.75rem; letter-spacing: 0.12em; color: var(--mut); white-space: nowrap; }
.rx-filter input {
  flex: 1 1 auto;
  min-inline-size: 0;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--ink);
  background: var(--bg);
  border: 0;
  border-block-end: 2px solid var(--rule);
  padding: calc(var(--u) * 1.5) 0;
  border-radius: 0;
}
.rx-filter input::placeholder { color: var(--faint); }
.rx-count { margin: 0; font-size: 0.8125rem; color: var(--mut); font-variant-numeric: tabular-nums; }

.rx-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 0 calc(var(--u) * 5);
  padding-block: calc(var(--u) * 3);
  border-block: 1px solid var(--line);
  font-size: 0.8125rem;
}
.rx-jump a { color: var(--mut); text-decoration: none; }
.rx-jump a:hover { color: var(--acc-ink); text-decoration: underline; }

.rx-g[hidden] { display: none; }
.rx-g h2 { margin-block-start: calc(var(--u) * 12); }

/* 問いと答えは上下に積む。左右2列は、中間幅で質問列が折り返しつつ
   右の「いますぐ」が横スクロールになり、両方とも読みにくくなる */
.rx {
  display: block;
  padding: calc(var(--u) * 4) 0;
  border-block-end: 1px solid var(--line);
}
.rx[hidden] { display: none; }
.rx-q {
  margin: 0 0 calc(var(--u) * 2);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.6;
}
.rx-body { min-width: 0; }
.rx-a { margin: 0; color: var(--mut); }
.rx-imm {
  margin-block-start: calc(var(--u) * 2);
  font-size: 0.8125rem;
  max-inline-size: 100%;
  overflow-x: auto;
}
.rx-more {
  display: inline-block;
  margin-inline-start: 0.6em;
  white-space: nowrap;
  font-size: 0.875rem;
  text-decoration: none;
  border-block-end: 1px solid currentColor;
}
.rx-more::before { content: "→ "; }



/* ---- ナビの検索 ---------------------------------------------------------- */

.nav-find {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 1.5);
  margin-block-end: calc(var(--u) * 6);
}
.nav-find label {
  flex: 0 0 100%;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--mut);
  margin-block-end: calc(var(--u));
}
/* 箱にする。下罫だけだと、ナビの見出しの下に語が並んでいるようにしか見えない */
.nav-find input {
  flex: 1 1 0;        /* auto だと入力欄の既定幅で折り返り、ボタンが下へ落ちる */
  min-inline-size: 0;
  font: inherit;
  font-size: 0.875rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--edge);
  border-radius: 0;
  padding: calc(var(--u) * 1.25) calc(var(--u) * 2);
  min-block-size: calc(var(--u) * 8);
}
.nav-find input:focus { border-color: var(--acc); }
.nav-find button {
  flex: 0 0 auto;
  font: inherit;
  font-size: 0.8125rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--edge);
  border-radius: 0;
  padding-inline: calc(var(--u) * 2.5);
  min-block-size: calc(var(--u) * 8);
  cursor: pointer;
}
.nav-find button:hover { color: var(--acc-ink); border-color: var(--acc); }
.nav-find input::placeholder { color: var(--faint); }
.nf-n {
  flex: 0 0 100%;
  font-size: 0.6875rem;
  color: var(--mut);
  margin-block-start: calc(var(--u) * 0.5);
}

/* ---- 検索結果 ------------------------------------------------------------ */

.sr-i {
  padding: calc(var(--u) * 3) 0;
  border-block-end: 1px solid var(--line);
}
.sr-i a { font-weight: 700; text-decoration: none; }
.sr-i a:hover { text-decoration: underline; }
.sr-section { font-weight: 500; color: var(--mut); }
.sr-k {
  margin-inline-start: 0.8em;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  color: var(--mut);
}
.sr-i p { margin: calc(var(--u)) 0 0; color: var(--mut); font-size: 0.9375rem; }
.sr-snippet { max-inline-size: 46rem; }

/* ---- 動く素材 ------------------------------------------------------------ */

.mat-workbench {
  margin-block: calc(var(--u) * 6) calc(var(--u) * 10);
  padding-block: calc(var(--u) * 5);
  border-block: 2px solid var(--rule);
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: calc(var(--u) * 6);
}
.mat-stage { min-inline-size: 0; }
.mat-frame {
  display: block;
  inline-size: 100%;
  aspect-ratio: 16 / 10;
  min-block-size: 24rem;
  border: 1px solid var(--edge);
  background: #07111f;
}
.mat-open {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  margin-block-start: calc(var(--u) * 2);
  font-size: 0.8125rem;
  font-weight: 700;
}
.mat-controls {
  align-self: start;
  background: var(--paper);
  border-inline-start: 1px solid var(--line);
  padding-inline-start: calc(var(--u) * 5);
}
.mat-controls fieldset { margin: 0; padding: 0; border: 0; }
.mat-controls legend {
  padding: 0 0 calc(var(--u) * 3);
  font: 700 0.8125rem/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: 0.08em;
}
.mat-control {
  /* 3列の最小幅を足すと親より広くなり、値が枠の外へ出ていた。
     どの列も 0 まで縮められるようにする */
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 3rem;
  align-items: center;
  gap: calc(var(--u) * 2);
  padding-block: calc(var(--u) * 2);
  min-block-size: 48px;
  border-block-start: 1px solid var(--line);
  font-size: 0.8125rem;
}
.mc-l { min-inline-size: 0; overflow-wrap: anywhere; }
.mc-h {
  grid-column: 1 / -1;
  margin-block-start: calc(var(--u) * -1);
  color: var(--mut);
  font-size: 0.6875rem;
  line-height: 1.6;
}
.mat-controls .fold { margin-block-start: calc(var(--u) * 3); }
.mat-controls .fold > summary { font-size: 0.8125rem; padding-block: calc(var(--u) * 3); }
.mat-controls .fold > .fold-in { padding-block-end: 0; }
.mat-control input[type="color"] {
  grid-column: 2 / 4;
  inline-size: 100%;
  min-block-size: 36px;
  padding: 2px;
  border: 1px solid var(--edge);
  background: var(--bg);
}
.mat-control input[type="range"] {
  inline-size: 100%;
  min-inline-size: 0;
  accent-color: var(--brand);
}
.mat-control output {
  justify-self: end;
  font: 600 0.75rem/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
.mat-presets {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 2);
  margin-block-start: calc(var(--u) * 4);
}
.mat-presets button {
  min-block-size: 44px;
  padding-inline: calc(var(--u) * 3);
  border: 1px solid var(--edge);
  border-radius: 0;
  color: var(--ink);
  background: var(--bg);
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
}
.mat-presets button:hover,
.mat-presets button:focus-visible { border-color: var(--brand); color: var(--brand); }
.mat-status { min-block-size: 2.8em; color: var(--mut); font-size: 0.75rem; }
.mat-code { max-block-size: 34rem; }

@media (max-width: 700px) {
  .mat-workbench { grid-template-columns: 1fr; }
  .mat-frame { min-block-size: 21rem; }
  .mat-controls { border-inline-start: 0; padding-inline-start: 0; }
}

.rx-a { color: var(--ink); }

/* ---- 図の見本 ------------------------------------------------------------ */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: calc(var(--u) * 5) calc(var(--u) * 5);
  margin-block: calc(var(--u) * 5) calc(var(--u) * 2);
}
.gx { display: block; text-decoration: none; color: var(--ink); }
.gx img {
  display: block;
  inline-size: 100%;
  block-size: 8.5rem;
  object-fit: cover;
  object-position: top left;
  border: 1px solid var(--line);
  background: var(--bg);
}
.gx-t {
  display: block;
  margin-block-start: calc(var(--u) * 1.5);
  font-size: 0.8125rem;
  color: var(--mut);
}
.gx:hover img { border-color: var(--acc); }
.gx:hover .gx-t { color: var(--acc-ink); }

/* ---- トップの制作入口 -------------------------------------------------- */

.page-top .shell {
  max-inline-size: var(--page);
  grid-template-columns: var(--nav-w) minmax(0, 1fr);
}
.page-top .main { padding-block-start: calc(var(--u) * 5); }
.page-top .toc { margin-block-end: calc(var(--u) * 4); }

.home-hero {
  min-block-size: min(37rem, calc(100dvh - var(--u) * 10));
  display: grid;
  grid-template-columns: minmax(21rem, 11fr) minmax(25rem, 13fr);
  align-items: stretch;
  border-block: 1px solid var(--rule);
  margin-block-end: calc(var(--u) * 16);
}
.home-hero-copy {
  min-inline-size: 0;
  align-self: center;
  padding: calc(var(--u) * 12) calc(var(--u) * 9) calc(var(--u) * 12) 0;
}
.home-brand {
  margin: 0 0 calc(var(--u) * 6);
  color: var(--brand);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.home-hero h1 {
  margin: 0;
  max-inline-size: none;
  font-size: clamp(3rem, 3.8vw, 4.15rem);
  line-height: 0.98;
  letter-spacing: -0.065em;
  text-wrap: balance;
}
.home-hero h1 span,
.home-hero h1 strong { display: block; white-space: nowrap; }
.home-hero h1 strong { color: var(--brand); font-weight: 800; }
.home-lead {
  max-inline-size: 30rem;
  margin: calc(var(--u) * 7) 0 0;
  color: var(--mut);
  font-size: 1.0625rem;
  line-height: 1.85;
  overflow-wrap: anywhere;
}
.home-actions {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 3);
  margin-block-start: calc(var(--u) * 8);
}
.home-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 3rem;
  padding-inline: calc(var(--u) * 5);
  border: 1px solid var(--brand);
  border-radius: 0;
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 180ms cubic-bezier(.16,1,.3,1), background-color 180ms ease;
}
.home-primary { color: #fff; background: #025dcc; }
.home-secondary { color: var(--brand); background: transparent; }
.home-actions a:hover { transform: translateY(-2px); }
.home-actions a:active { transform: translateY(1px); }
.home-figure-wall {
  --figure-gap: calc(var(--u) * 2);
  position: relative;
  overflow: hidden;
  min-block-size: 32rem;
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  color: #f7fbfd;
  background: #2c647f;
  isolation: isolate;
}
.home-figure-link:focus-visible {
  outline: 3px solid #69b7ff;
  outline-offset: 2px;
}
.home-figure-rows {
  flex: 1;
  min-block-size: 0;
  display: grid;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 0;
  padding-block: 0;
}
.home-figure-row {
  --duration: 50s;
  min-inline-size: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.home-figure-row:nth-child(even) { background: #35728b; }
.home-figure-row + .home-figure-row { border-block-start: 1px solid #b2c5cf; }
.home-figure-row:nth-child(2) { --duration: 57s; }
.home-figure-row:nth-child(3) { --duration: 46s; }
.home-figure-row:nth-child(4) { --duration: 62s; }
.home-figure-track {
  display: flex;
  inline-size: max-content;
  will-change: auto;
  animation: home-figure-cycle var(--duration) linear infinite;
  animation-play-state: paused;
}
.home-figure-row--reverse .home-figure-track { animation-direction: reverse; }
.home-figure-wall.is-running .home-figure-track {
  will-change: transform;
  animation-play-state: running;
}
.home-figure-wall:hover .home-figure-track,
.home-figure-wall:has(.home-figure-link:focus-visible) .home-figure-track {
  animation-play-state: paused;
}
.home-figure-wall:has(.home-figure-link:focus-visible) .home-figure-row {
  overflow-x: auto;
  scrollbar-color: #c5d5dc #2c647f;
}
.home-figure-wall:has(.home-figure-link:focus-visible) .home-figure-track {
  animation: none;
  transform: none;
}
.home-figure-set {
  flex: none;
  display: flex;
  gap: var(--figure-gap);
  padding-inline-end: var(--figure-gap);
}
.home-figure-link {
  flex: none;
  inline-size: clamp(11rem, 14vw, 13.25rem);
  overflow: hidden;
  color: #f7fbfd;
  background: #123f5b;
  border: 1px solid #a9bec9;
  box-shadow: 0 3px 10px rgba(6, 24, 36, 0.24);
  text-decoration: none;
}
.home-figure-link:hover { color: #fff; border-color: #8fbde8; }
.home-figure-link img {
  display: block;
  inline-size: 100%;
  block-size: 7.5rem;
  object-fit: contain;
  background: #f7f4ed;
  border-block-end: 1px solid #a9bec9;
}
.home-figure-link span {
  display: block;
  overflow: hidden;
  padding: calc(var(--u) * 1.25) calc(var(--u) * 2);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@keyframes home-figure-cycle {
  to { transform: translateX(-50%); }
}

.page-top .main > h2 {
  margin-block-start: calc(var(--u) * 18);
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  letter-spacing: -0.035em;
}
.home-entry-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(17rem, 4fr);
  gap: calc(var(--u) * 12);
  align-items: start;
  margin-block-start: calc(var(--u) * 7);
}
.home-solve { border-block-start: 3px solid var(--rule); }
.home-solve h3,
.home-material-pick h3,
.home-showcase-copy h3 {
  margin: calc(var(--u) * 4) 0 calc(var(--u) * 3);
  font-size: clamp(1.35rem, 2.1vw, 2rem);
  line-height: 1.35;
  letter-spacing: -0.025em;
}
.home-solve > p,
.home-material-pick > p,
.home-showcase-copy > p { color: var(--mut); max-inline-size: 38rem; }
.home-entry-main {
  display: grid;
  grid-template-columns: minmax(9rem, 1fr) minmax(0, 2fr);
  gap: calc(var(--u) * 5);
  align-items: baseline;
  margin-block: calc(var(--u) * 7) calc(var(--u) * 3);
  padding: calc(var(--u) * 5);
  color: #fff;
  background: #025dcc;
  text-decoration: none;
}
.home-entry-main b { font-size: clamp(1.35rem, 2.5vw, 2.25rem); }
.home-entry-main span { font-size: 0.9375rem; }
.home-symptoms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-block-start: 1px solid var(--line);
}
.home-symptoms a {
  padding: calc(var(--u) * 3) calc(var(--u) * 3) calc(var(--u) * 3) 0;
  border-block-end: 1px solid var(--line);
  color: var(--ink);
  font-size: 0.875rem;
  text-decoration: none;
}
.home-symptoms a:hover { color: var(--brand); }
.home-material-pick { margin-block-start: calc(var(--u) * 10); }
.home-material-image { display: block; position: relative; }
/* 画面に入ったら実物を上に重ねる。押す相手はリンクのままにする */
.home-material-live {
  position: absolute; inset: 0; inline-size: 100%; block-size: 100%;
  border: 0; pointer-events: none; opacity: 0; transition: opacity 240ms;
}
.home-material-image.is-live .home-material-live { opacity: 1; }
.home-material-image.is-live img { visibility: hidden; }
.home-material-image.is-live .home-material-name { z-index: 1; }
.home-material-image img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  border: 1px solid var(--line);
}
.home-material-pick h3 a,
.home-showcase-copy h3 a { color: inherit; text-decoration: none; }
.home-material-pick h3 a:hover,
.home-showcase-copy h3 a:hover { color: var(--brand); }

.home-work-links {
  display: grid;
  grid-template-columns: 1.7fr repeat(3, minmax(9rem, 1fr));
  margin-block-start: calc(var(--u) * 10);
  border-block: 1px solid var(--rule);
}
.home-work-links a {
  min-block-size: 8.5rem;
  padding: calc(var(--u) * 4);
  border-inline-end: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}
.home-work-links a:last-child { border-inline-end: 0; }
.home-work-links a:hover { color: var(--brand); background: var(--paper); }
.home-work-links b,
.home-work-links span { display: block; }
.home-work-links b { font-size: 1rem; }
.home-work-links span { margin-block-start: calc(var(--u) * 2); color: var(--mut); font-size: 0.75rem; }
.home-work-wide b { font-size: 1.25rem; }

.home-showcase {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(17rem, 4fr);
  gap: calc(var(--u) * 10);
  align-items: end;
  margin-block-start: calc(var(--u) * 7);
  padding-block-end: calc(var(--u) * 10);
  border-block-end: 1px solid var(--rule);
}
.home-style-visual { display: block; overflow: hidden; }
.home-style-visual img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  border: 1px solid var(--line);
  transition: transform 360ms cubic-bezier(.16,1,.3,1);
}
.home-style-visual:hover img { transform: scale(1.015); }
.home-showcase-copy dl {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: calc(var(--u) * 7) 0;
  border-block-start: 1px solid var(--line);
}
.home-showcase-copy dl div { padding: calc(var(--u) * 3) 0; }
.home-showcase-copy dt { color: var(--mut); font-size: 0.75rem; }
.home-showcase-copy dd { margin: 0; font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.home-text-link { color: var(--brand); font-weight: 700; }

@media (prefers-color-scheme: dark) {
  .home-primary { color: #07111f; background: #69b7ff; }
  .home-entry-main { color: #07111f; background: #69b7ff; }
}

@media (max-width: 900px) {
  .page-top .main { padding-block-start: calc(var(--u) * 5); }
  .home-hero {
    min-block-size: 0;
    grid-template-columns: minmax(0, 1fr);
    margin-block-end: calc(var(--u) * 11);
  }
  .home-hero-copy { padding: calc(var(--u) * 10) 0; }
  .home-hero h1 { font-size: clamp(3rem, 11vw, 4.75rem); }
  .home-figure-wall { min-block-size: min(76vw, 32rem); }
  .home-figure-link img { block-size: 6.5rem; }
  .home-entry-grid,
  .home-showcase { grid-template-columns: 1fr; gap: calc(var(--u) * 7); }
  .home-material-pick { margin-block-start: 0; }
  .home-work-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-work-links a:nth-child(2) { border-inline-end: 0; }
  .home-work-links a:nth-child(-n+2) { border-block-end: 1px solid var(--line); }
}

@media (max-width: 560px) {
  .home-actions { display: grid; }
  .home-figure-wall { min-block-size: 25rem; }
  .home-figure-link { inline-size: 10.5rem; }
  .home-figure-link img { block-size: 5.25rem; }
  .home-entry-main { grid-template-columns: 1fr; gap: calc(var(--u) * 2); }
  .home-symptoms,
  .home-work-links { grid-template-columns: 1fr; }
  .home-work-links a,
  .home-work-links a:nth-child(2) { border-inline-end: 0; border-block-end: 1px solid var(--line); }
  .home-work-links a:last-child { border-block-end: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .home-actions a,
  .home-style-visual img { transition: none; }
  .home-actions a:hover,
  .home-style-visual:hover img { transform: none; }
  .home-figure-wall { min-block-size: 0; }
  .home-figure-rows {
    display: grid;
    grid-template-rows: none;
    gap: calc(var(--u) * 3);
    padding: calc(var(--u) * 3);
  }
  .home-figure-row { display: block; overflow: visible; }
  .home-figure-track { display: block; animation: none; transform: none; }
  .home-figure-set {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: calc(var(--u) * 2);
    padding: 0;
  }
  .home-figure-set[aria-hidden="true"] { display: none; }
  .home-figure-link { inline-size: auto; box-shadow: none; }
  .home-figure-set:not([aria-hidden]) .home-figure-link:nth-child(n + 4) { display: none; }
}

@media (max-width: 560px) and (prefers-reduced-motion: reduce) {
  .home-figure-set { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-figure-set:not([aria-hidden]) .home-figure-link:nth-child(n + 3) { display: none; }
}

@media print {
  .home-figure-wall { min-block-size: 14rem; }
  .home-figure-track { animation: none; }
  .home-actions { display: none; }
}

/* ---- 20様式の比較 ------------------------------------------------------ */

/* 20枚を大きく積むと 1440px で20画面になり、索引として働かない。
   同じ内容で組んだ実画面を「群ごとに5枚ずつ」並べ、そのまま押して詳細へ。
   狭い画面では列を減らす（1段5列は指で押せない） */
.styles-twenty { margin-block-start: calc(var(--u) * 5); }
.style-group { margin-block: calc(var(--u) * 7) 0; }
.style-group > h3 {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 3);
  margin: 0 0 calc(var(--u) * 2);
  font-size: 1rem;
}
.sg-n {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--mut);
}
.style-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: calc(var(--u) * 4) calc(var(--u) * 3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.style-detail-frame {
  display: block;
  inline-size: 100%;
  block-size: min(900px, 110vw);   /* 部品を揃えた1ページなので高めに。枠の中で送れる */
  min-block-size: 360px;
  border: 1px solid var(--line);
  background: #fff;
}
@media (max-width: 640px) {
  .style-detail-frame {
    block-size: 760px;
    min-block-size: 760px;
  }
}
.style-item { color: var(--ink); text-decoration: none; display: block; }
.style-item img {
  display: block;
  inline-size: 100%;
  block-size: auto;          /* width/height 属性が入るので auto を明示しないと比が効かない */
  aspect-ratio: 8 / 5;
  object-fit: cover;
  object-position: top center;
  border: 1px solid var(--line);
}
.style-item > span { display: block; padding-block-start: calc(var(--u) * 2); }
.style-item b,
.style-item small { display: block; }
.style-item b { font-size: 0.875rem; line-height: 1.4; }
.style-item small { color: var(--mut); font-size: 0.75rem; line-height: 1.4; }
.style-item:hover b { color: var(--brand); }
.style-item:hover img,
.style-item:focus-visible img { border-color: var(--brand); }

@media (max-width: 900px) {
  .style-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .style-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

}

/* ---- 図のテキスト版 ------------------------------------------------------ */

.fig-alt { margin-block-start: calc(var(--u) * 2); font-size: 0.8125rem; }
.fig-alt > summary {
  cursor: pointer;
  color: var(--mut);
  list-style: none;
  display: inline-block;
  border-block-end: 1px solid var(--line);
  padding-block-end: 1px;
}
.fig-alt > summary::-webkit-details-marker { display: none; }
.fig-alt > summary::before { content: "＋ "; }
.fig-alt[open] > summary::before { content: "− "; }
.fig-alt > summary:hover { color: var(--acc-ink); }
.fig-alt ul {
  margin: calc(var(--u) * 2) 0 0;
  padding: calc(var(--u) * 3) calc(var(--u) * 4);
  list-style: none;
  background: var(--paper);
  color: var(--mut);
  line-height: 1.8;
}
.fig-alt li { margin: 0 0 calc(var(--u) * 0.5); }

@media print { .fig-alt { display: none; } }

/* ---- 図を大きく見る ------------------------------------------------------
 * 図は 800px 前後で描いてある。狭い画面では字が潰れるので、押すと拡げられる。
 * JavaScript が無いときは、ただの画像へのリンクとして働く。
 */

/* 図の下に置く入口。「図の中身を文字で読む」と同じ見た目に揃える */
.figz {
  display: inline-block;
  margin-block-start: calc(var(--u) * 2);
  font-size: 0.8125rem;
  color: var(--mut);
  text-decoration: none;
  border-block-end: 1px solid var(--line);
  padding-block-end: 1px;
  min-block-size: calc(var(--u) * 6);
}
.figz::before { content: "＋ "; }
.figz:hover { color: var(--acc-ink); }
.figz + .fig-alt { margin-block-start: calc(var(--u) * 1.5); }
/* 絵そのものも押せる。触る画面には矢印カーソルが無いので、入口は文字でも出す */
.js .fig img { cursor: zoom-in; }
@media print { .figz { display: none; } .js .fig img { cursor: auto; } }

/* 画面いっぱいには広げない。暗くした紙面の上に、図の板が1枚浮く */
dialog.lb {
  padding: 0;
  border: 1px solid var(--line);
  inline-size: min(92vw, 1400px);
  max-inline-size: 92vw;
  max-block-size: 88dvh;
  background: var(--bg);
  color: var(--ink);
  overflow: hidden;
}
dialog.lb::backdrop { background: rgba(12, 11, 10, 0.72); }
/* 2段階目（もっと大きく）は画面いっぱいに使う（依頼者の指摘 2026-09-06） */
dialog.lb.zoomed {
  inline-size: 100vw;
  max-inline-size: 100vw;
  block-size: 100dvh;
  max-block-size: 100dvh;
  margin: 0;
  border: 0;
}
dialog.lb.zoomed .lb-stage { block-size: calc(100dvh - var(--u) * 12); max-block-size: none; }

.lb-bar {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 4);
  padding: calc(var(--u) * 2) calc(var(--u) * 4);
  border-block-end: 1px solid var(--line);
  font-size: 0.8125rem;
  color: var(--mut);
  block-size: calc(var(--u) * 12);
}
.lb-bar p {
  margin: 0;
  flex: 1 1 auto;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 560px) { .lb-bar p { display: none; } }
.lb-bar button {
  flex: 0 0 auto;
  min-block-size: calc(var(--u) * 8);
  min-inline-size: calc(var(--u) * 8);
  padding: calc(var(--u) * 1.5) calc(var(--u) * 3);
  border: 1px solid var(--edge);   /* 押せるものの輪郭は 3:1 以上に */
  border-radius: 0;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.lb-bar button:hover { color: var(--acc-ink); border-color: var(--acc); }

.lb-stage {
  max-block-size: calc(88dvh - var(--u) * 12);
  overflow: auto;
  overscroll-behavior: contain;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lb-stage img {
  display: block;
  flex: 0 0 auto;
  inline-size: 100%;
  max-block-size: calc(88dvh - var(--u) * 12);
  cursor: zoom-in;
}
/* 拡げた側。幅は JavaScript が板の幅から決めて px で入れる。板の中で送る。
 * スクロールバーまで手を運ばせず、絵をつかんで動かせるようにする */
.lb-stage.zoom { align-items: start; justify-content: start; cursor: grab; }
.lb-stage.zoom img { inline-size: auto; max-block-size: none; cursor: grab; }
.lb-stage.zoom.grabbing, .lb-stage.zoom.grabbing img { cursor: grabbing; }
.lb-stage img { user-select: none; }

.lb-hint { display: none; }
/* 指で送れる画面には要らない案内。狭い所では説明を出す幅も無い */
@media (any-pointer: fine) and (min-width: 700px) {
  .lb.zoomed .lb-hint { display: inline; flex: 0 0 auto; }
}

/* ---- コードのコピー ------------------------------------------------------ */

pre { position: relative; }
.copy {
  position: absolute;
  inset-block-start: calc(var(--u) * 2);
  inset-inline-end: calc(var(--u) * 2);
  font: inherit;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--mut);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: calc(var(--u)) calc(var(--u) * 2);
  min-block-size: 44px;
  min-inline-size: 44px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms;
}
pre:hover .copy, .copy:focus-visible { opacity: 1; }
.copy:hover { color: var(--acc-ink); border-color: var(--acc); }
@media (hover: none) { .copy { opacity: 1; } }
@media print { .copy { display: none; } }

.rx-all { font-size: 0.8125rem; color: var(--mut); margin-block-start: calc(var(--u) * 3); }

/* ---- 埋め込みの道具 ------------------------------------------------------ */

.tool {
  margin-block: calc(var(--u) * 5);
  border-block-start: 1px solid var(--line);
  border-block-end: 1px solid var(--line);
  padding-block: calc(var(--u) * 5);
}
html.nojs .tool { display: none; }
.tool-nojs { display: none; font-size: 0.875rem; color: var(--mut); }
html.nojs .tool-nojs { display: block; }

.tool-in {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 5) calc(var(--u) * 8);
  align-items: end;
  margin-block-end: calc(var(--u) * 5);
}
.tool-in > label {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1.5);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--mut);
}
.tool-pair { display: flex; align-items: center; gap: calc(var(--u) * 2); }
.tool-unit { font-size: 0.8125rem; color: var(--mut); font-weight: 400; }

.tool input[type="text"], .tool input[type="number"], .tool select {
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--ink);
  background: var(--bg);
  border: 0;
  border-block-end: 2px solid var(--rule);
  border-radius: 0;
  padding: calc(var(--u)) 0;
  min-inline-size: 0;
}
.tool input[type="text"] { inline-size: 7.5em; font-family: ui-monospace, Consolas, monospace; }
.tool input[type="number"] { inline-size: 4.5em; }
.tool select { inline-size: auto; padding-inline-end: calc(var(--u) * 2); }
.tool input[type="color"] {
  inline-size: 2.5rem;
  block-size: 2.5rem;
  padding: 0;
  border: 1px solid var(--edge);
  background: none;
  border-radius: 0;
  cursor: pointer;
}
.tool button {
  font: inherit;
  font-size: 0.8125rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--edge);
  border-radius: 0;
  padding: calc(var(--u) * 1.25) calc(var(--u) * 3);
  cursor: pointer;
}
.tool button:hover { color: var(--acc-ink); border-color: var(--acc); }
.tool-swap { margin: 0; }

.tool-out { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 4) calc(var(--u) * 8); align-items: start; }
.tool-num { margin: 0; display: flex; align-items: baseline; gap: 0.15em; }
.tool-num b { font-size: 2.5rem; line-height: 1; font-variant-numeric: tabular-nums; }
.tool-num span { color: var(--mut); font-size: 1rem; }
.tool-verdict { list-style: none; margin: 0; padding: 0; font-size: 0.875rem; }
.tool-verdict li {
  display: flex;
  gap: calc(var(--u) * 3);
  justify-content: space-between;
  padding: calc(var(--u)) 0;
  border-block-end: 1px solid var(--line);
  min-inline-size: 20rem;
}
.tool-verdict .ok { color: var(--acc-ink); }
.tool-verdict .ng { color: var(--bad); }

.tool-demo {
  margin-block-start: calc(var(--u) * 5);
  padding: calc(var(--u) * 4) calc(var(--u) * 5);
  border: 1px solid var(--line);
}
.tool-demo p { margin: 0 0 calc(var(--u) * 2); }
.tool-demo .d-lg { font-size: 24px; line-height: 1.4; }
.tool-demo .d-md { font-size: 18.7px; font-weight: 700; line-height: 1.5; }
.tool-demo .d-sm { font-size: 16px; }
.tool-demo .d-ui { display: flex; align-items: center; gap: calc(var(--u) * 2); font-size: 14px; margin: 0; }
.d-box { inline-size: 1.5rem; block-size: 1.5rem; border: 2px solid currentColor; }

.tool-cvd { margin-block-start: calc(var(--u) * 5); }
.tool-cvd-h { margin: 0 0 calc(var(--u) * 2); font-size: 0.75rem; letter-spacing: 0.1em; color: var(--mut); }
.cvd-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 2); }
.cvd-c { padding: calc(var(--u) * 3); font-size: 0.875rem; border: 1px solid var(--line); }
.cvd-c span { display: block; font-size: 0.6875rem; letter-spacing: 0.1em; opacity: 0.75; margin-block-end: calc(var(--u)); }

.tool-preview p {
  margin: 0 0 calc(var(--u) * 2);
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 3);
  flex-wrap: wrap;
  line-height: 1.35;
}
.ts-k, .sp-k {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.75rem;
  color: var(--mut);
  inline-size: 7.5rem;
  flex: none;
}
.ts-v { font-size: 0.75rem; color: var(--mut); font-variant-numeric: tabular-nums; }

.tool-bars { margin-block-end: calc(var(--u) * 4); }
.sp-r { display: flex; align-items: center; gap: calc(var(--u) * 3); padding: calc(var(--u)) 0; }
.sp-b { display: block; block-size: 0.875rem; background: var(--acc); flex: none; }
.sp-v { font-size: 0.8125rem; color: var(--mut); font-variant-numeric: tabular-nums; inline-size: 3.5rem; flex: none; }
.sp-u { font-size: 0.75rem; color: var(--faint); }

@media (max-width: 900px) {
  .tool-verdict li { min-inline-size: 0; }
  .cvd-row { grid-template-columns: 1fr; }
  .ts-k, .sp-k { inline-size: auto; }
  .sp-b { max-inline-size: 40vw; }
}

.tool-gen { font-weight: 700; }
.tool-warn {
  margin: 0 0 calc(var(--u) * 4);
  padding: calc(var(--u) * 2) calc(var(--u) * 3);
  font-size: 0.8125rem;
  color: var(--bad);
  background: color-mix(in srgb, var(--bad) 8%, var(--bg));
  border-inline-start: 3px solid var(--bad);
}
.tool-warn[hidden] { display: none; }

.tool input[type="range"] {
  inline-size: 10rem;
  accent-color: var(--acc-ink);
}

/* ---- スクリム道具 -------------------------------------------------------- */

.sc-live {
  position: relative;
  min-block-size: 10rem;
  padding: calc(var(--u) * 6) calc(var(--u) * 5);
  margin-block-end: calc(var(--u) * 4);
  color: var(--sc-fg, #fff);
  background:
    linear-gradient(to top, rgba(0,0,0,var(--sc-op, 0.55)) 0%, transparent 60%),
    linear-gradient(135deg, #6b8f71 0%, #3d5a45 40%, #8a7355 100%);
  border: 1px solid var(--line);
}
.sc-cap { margin: 0; font-size: 1.25rem; font-weight: 700; line-height: 1.35; }

/* ---- clamp 道具 ------------------------------------------------------------ */

.cl-live {
  margin-block-end: calc(var(--u) * 4);
  padding: calc(var(--u) * 4);
  border: 1px solid var(--line);
}
.cl-h1 { margin: 0; line-height: 1.25; }

/* ---- 余白ライブプレビュー ------------------------------------------------ */

.sp-live-wrap {
  margin-block-end: calc(var(--u) * 4);
  border: 1px solid var(--line);
  overflow: hidden;
}
.sp-live {
  padding: var(--sp-section, 48px) calc(var(--u) * 4);
  background: var(--bg);
  font-size: 0.8125rem;
}
.sp-page { display: flex; flex-direction: column; gap: var(--sp-outer, 24px); }
.sp-block { display: flex; flex-direction: column; gap: var(--sp-inner, 8px); }
.sp-h { margin: 0; font-weight: 700; font-size: 1rem; }
.sp-h2 { margin: 0; font-weight: 700; }
.sp-p { margin: 0; color: var(--mut); line-height: 1.6; }
.sp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-inner, 8px); }
.sp-card {
  padding: calc(var(--u) * 2);
  background: var(--wash);
  border: 1px solid var(--line);
  text-align: center;
}
.sp-hero { padding-block-end: var(--sp-inner, 8px); border-block-end: 1px solid var(--line); }
.sp-btn {
  font: inherit;
  font-size: 0.8125rem;
  padding: calc(var(--u) * 2) calc(var(--u) * 4);
  background: var(--acc-ink);
  color: var(--bg);
  border: none;
  cursor: default;
}
.sp-field { display: flex; flex-direction: column; gap: calc(var(--u)); }
.sp-field span { font-size: 0.75rem; color: var(--mut); }
.sp-field input, .sp-field textarea {
  font: inherit;
  font-size: 0.8125rem;
  padding: calc(var(--u) * 1.5);
  border: 1px solid var(--line);
  background: var(--bg);
}
.sp-field textarea { min-block-size: 3rem; resize: none; }

@media (max-width: 480px) {
  .sp-cards { grid-template-columns: 1fr; }
}

/* ---- フォーカス道具 ------------------------------------------------------ */

.fc-live {
  padding: calc(var(--u) * 6);
  margin-block-end: calc(var(--u) * 4);
  background: var(--bg);
  border: 1px solid var(--line);
}
.fc-live.fc-dark { background: #1c1a17; }
.fc-btn {
  font: inherit;
  font-size: 0.9375rem;
  padding: calc(var(--u) * 2) calc(var(--u) * 5);
  background: var(--wash);
  border: 1px solid var(--line);
  cursor: pointer;
}
.fc-btn:focus-visible {
  outline: var(--fc-w, 2px) solid var(--fc-color, #a1601f);
  outline-offset: var(--fc-off, 2px);
}
.fc-dark .fc-btn:focus-visible {
  outline-color: #fff;
  box-shadow: 0 0 0 calc(var(--fc-w, 2px) + var(--fc-off, 2px) + 2px) #000;
}

/* ---- グリッド道具 -------------------------------------------------------- */

.gd-live { margin-block-end: calc(var(--u) * 4); }
.gd-grid {
  display: grid;
  grid-template-columns: repeat(var(--gd-cols, 12), minmax(0, 1fr));
  gap: var(--gd-gap, 24px);
}
.gd-main, .gd-side {
  padding: calc(var(--u) * 3);
  font-size: 0.75rem;
  text-align: center;
  background: var(--wash);
  border: 1px dashed var(--line);
}

/* ---- ボタン道具 ---------------------------------------------------------- */

/* 見た目は widgets.py の BUTTONS_PREVIEW_CSS（.button 系統）が持つ。
   ここは道具の置き場所だけ */
.bt-live { margin-block-end: calc(var(--u) * 4); }
@keyframes tool-spin { to { transform: rotate(360deg); } }

/* ---- 役割色道具 ---------------------------------------------------------- */

.rl-live {
  padding: calc(var(--u) * 5);
  margin-block-end: calc(var(--u) * 4);
  background: var(--color-bg, var(--bg));
  border: 1px solid var(--line);
}
.rl-card { max-inline-size: 20rem; }
.rl-title { margin: 0 0 calc(var(--u) * 2); font-weight: 700; color: var(--color-text, var(--ink)); }
.rl-body { margin: 0 0 calc(var(--u) * 2); color: var(--color-text, var(--ink)); line-height: 1.6; }
.rl-link { margin: 0 0 calc(var(--u) * 2); color: var(--color-accent-text, var(--acc-ink)); }
.rl-err { margin: 0; font-size: 0.8125rem; color: var(--color-danger, var(--bad)); }

/* ---- レスポンシブ clamp 道具 --------------------------------------------- */

.rc-live {
  margin-block-end: calc(var(--u) * 4);
  padding: calc(var(--u) * 4);
  border: 1px solid var(--line);
  resize: horizontal;
  overflow: auto;
  min-inline-size: 12rem;
  max-inline-size: 100%;
}
.rc-box {
  display: inline-block;
  background: var(--wash);
  border: 1px solid var(--line);
  line-height: 1.4;
}

/* ---- 公開前チェック ------------------------------------------------------ */

.ck-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: calc(var(--u) * 5);
  margin-block: calc(var(--u) * 6) calc(var(--u) * 2);
  padding-block-end: calc(var(--u) * 3);
  border-block-end: 2px solid var(--rule);
}
.ck-n { margin: 0; font-size: 0.8125rem; letter-spacing: 0.08em; color: var(--mut); }
.ck-n b { font-size: 1.125rem; color: var(--ink); font-variant-numeric: tabular-nums; margin-inline-start: 0.4em; }
.ck-bar button {
  font: inherit;
  font-size: 0.8125rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--edge);
  border-radius: 0;
  padding: calc(var(--u) * 1.25) calc(var(--u) * 3);
  min-block-size: calc(var(--u) * 6);
  cursor: pointer;
}
.ck-bar button:hover { color: var(--acc-ink); border-color: var(--acc); }
#ck-copy { margin-inline-start: auto; }
#ck-reset { color: var(--mut); border-color: var(--line); }
.ck-note { font-size: 0.8125rem; color: var(--mut); margin-block: 0 calc(var(--u) * 4); }

ul.cklist { list-style: none; margin: calc(var(--u) * 3) 0; padding: 0; }
ul.cklist li { margin: 0; }
.ck label {
  display: grid;
  grid-template-columns: 1.15rem minmax(0, 1fr);
  gap: calc(var(--u) * 3);
  align-items: start;
  padding: calc(var(--u) * 1.75) 0;
  border-block-end: 1px solid var(--line);
  cursor: pointer;
}
.ck input {
  inline-size: 1.15rem;
  block-size: 1.15rem;
  margin: 0.35em 0 0;
  accent-color: var(--acc-ink);
}
.ck input:checked + span { color: var(--mut); text-decoration: line-through; text-decoration-thickness: 1px; }
.ck label:hover span { color: var(--acc-ink); }



/* ---- ページの中を絞る窓と、0件のときの面 --------------------------------- */

/* ヘッダーの窓（箱・ページを移る）と見分けがつくよう、こちらは面に載せて
   左に太い罫を立てる。「いま見ているページの道具」だと形で分かるように */
.rx-here {
  background: var(--paper);
  border-inline-start: 3px solid var(--rule);
  padding: calc(var(--u) * 3) calc(var(--u) * 4);
  /* 面の上でも 4.5:1 を保つ。地の値のままだと薄い文字が 4.15、
     アクセントの文字が 4.35 で割る（左ナビの帯と同じ手当て） */
  --faint:   #6f6a62;
  --acc-ink: #96591b;
}
@media (prefers-color-scheme: dark) {
  /* 暗い表示は地の値のままで 4.85 / 6.54。明るい表示のために濃くした2つを戻す */
  .rx-here { --faint: #8f8a82; --acc-ink: #d99356; }
}
.rx-here .rx-filter input { background: transparent; }
@media (max-width: 560px) {
  .rx-here { padding-inline: calc(var(--u) * 3); }
  .rx-here .rx-filter { flex-wrap: wrap; }
}
.rx-here-n {
  flex: 0 0 100%;
  margin: 0;
  font-size: 0.6875rem;
  color: var(--mut);
}

/* 0件は「0 件」で終わらせない。何が0件かと、次にできることを置く。
   この資料の「空状態」がそう書いてある */
.find-empty {
  margin-block: calc(var(--u) * 6);
  padding: calc(var(--u) * 8) calc(var(--u) * 5);
  border: 1px dashed var(--edge);
  text-align: center;
}
.find-empty[hidden] { display: none; }
.fe-h { margin: 0 0 calc(var(--u) * 2); font-weight: 700; font-size: 1.0625rem; }
.fe-h b { color: var(--acc-ink); }
.fe-b { margin: 0 0 calc(var(--u) * 5); color: var(--mut); font-size: 0.9375rem; }
.fe-a {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 4);
  justify-content: center;
  align-items: baseline;
  margin: 0;
}
.fe-a button {
  font: inherit;
  font-size: 0.875rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--edge);
  border-radius: 0;
  padding: calc(var(--u) * 1.5) calc(var(--u) * 4);
  min-block-size: calc(var(--u) * 8);
  cursor: pointer;
}
.fe-a button:hover { color: var(--acc-ink); border-color: var(--acc); }
.fe-a a {
  font-size: 0.875rem;
  color: var(--acc-ink);
  text-decoration: none;
  border-block-end: 1px solid currentColor;
  padding-block: calc(var(--u) * 1.5);
}

/* ---- チェックの結果を持ち出す -------------------------------------------- */

.ck-out {
  inline-size: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--code);
  border: 1px solid var(--edge);
  border-radius: 0;
  padding: calc(var(--u) * 3);
  margin-block-end: calc(var(--u) * 4);
}
.ck-out[hidden] { display: none; }

@media print {
  .ck-out, .find-empty, .rx-here { display: none; }
}

@media print {
  .ck-bar, .ck-note { display: none; }
  .ck input { appearance: none; -webkit-appearance: none; border: 1px solid #000; }
  .ck input:checked + span { text-decoration: none; color: #000; }
}

/* ---- 名乗り -------------------------------------------------------------- */

.colophon {
  grid-column: 1 / -1;
  margin: calc(var(--u) * 12) 0 0;
  padding-block-start: calc(var(--u) * 5);
  border-block-start: 1px solid var(--line);
  font-size: 0.8125rem;
  line-height: 1.8;
  color: var(--mut);
}

@media (min-width: 901px) {
  .colophon, .foot { padding-inline-start: calc(var(--nav-w) + var(--u) * 10); }
}
@media print { .colophon { display: none; } }

/* ---- そのページの語 ------------------------------------------------------ */

.terms-n { font-size: 0.8125rem; color: var(--mut); margin-block: 0 calc(var(--u) * 3); }
dl.terms-list { font-size: 0.9375rem; }
dl.terms-list dt { color: var(--ink); }
dl.terms-list dd { color: var(--mut); }

/* ---- 狭い画面のページ内目次 ---------------------------------------------- */

.toc {
  margin-block: calc(var(--u) * 2) calc(var(--u) * 8);
  border-block: 1px solid var(--line);
}
.toc > summary {
  cursor: pointer;
  list-style: none;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  color: var(--mut);
  padding-block: calc(var(--u) * 2);
  border-block: 1px solid var(--line);
}
.toc > summary::-webkit-details-marker { display: none; }
.toc > summary::after { content: " ＋"; }
.toc[open] > summary::after { content: " −"; }
.toc ul { list-style: none; margin: 0; padding: calc(var(--u) * 2) 0; }
.toc li { margin: 0; }
.toc a {
  display: block;
  padding: calc(var(--u) * 1.25) 0;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.9375rem;
}
.toc a:hover { color: var(--acc-ink); }

@media (max-width: 1180px) {
  .toc { display: block; margin-block-end: calc(var(--u) * 6); }
}
@media print { .toc { display: none; } }

/* ---- パターン集 ---------------------------------------------------------- */

/* starter トークン（道具の領域に限って定義。値は content/starter.md と一致）
   道具が出す見本は生成コードと同じ変数名で動く。ページ側の変数とは別系統。
   パターンのプレビューは iframe の中で starter.md のCSSをそのまま読むので、ここには要らない */
.pat-wrap, .wb-live, .tool {
  --color-bg: #fbfaf8; --color-surface: #f3efe8; --color-text: #1c1a17;
  --color-text-muted: #6f6a62; --color-border: #d8d2c7;
  --color-accent: #b4713a; --color-accent-text: #95591c;
  --color-danger: #a2382a; --color-focus: var(--color-accent-text);
  --color-on-accent: #ffffff; --color-on-danger: #ffffff;
  --radius: 2px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 128px;
  --text-sm: 0.8125rem; --text-base: 1rem; --text-lg: 1.1875rem;
  --text-xl: 1.5rem; --text-2xl: 2.25rem;
  --leading-body: 1.9; --leading-heading: 1.35;
  --dur-fast: 120ms; --dur-base: 240ms; --dur-slow: 420ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --page: 80rem; --gutter: var(--space-6);
}
@media (prefers-color-scheme: dark) {
  .pat-wrap, .wb-live, .tool {
    --color-bg: #171614; --color-surface: #201e1b; --color-text: #e9e6e1;
    --color-text-muted: #a49d93; --color-border: #3b3833;
    --color-accent: #d99356; --color-accent-text: #d99356; --color-on-accent: #171614;
    --color-danger: #d4705f; --color-on-danger: #171614;
  }
}

/* プレビューは iframe。中で動いているのは「コピーする」の html と css そのもので、
   見本用に書き直したものではない。だから見たとおりのものが手に入る */
.pat-wrap {
  margin-block: calc(var(--u) * 4);
  padding: calc(var(--u) * 3);
  /* 配布したコードが実際に置かれる地で見せる。資料の面色（--paper）の上だと
     accent-text が 4.35:1 に落ち、この資料自身の基準（4.5:1）を割る */
  background: var(--color-bg);
  border: 1px solid var(--line);
}
/* 枠の中が何の上に乗っているか。絵より先に読む位置に置く */
.pat-base {
  margin: 0 0 calc(var(--u) * 3);
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--color-text-muted);
}
.pat-base a { color: var(--color-accent-text); }
.pat-frame {
  display: block;
  inline-size: 100%;
  border: 0;
  background: var(--color-bg);
}
.pat-ctrl {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: calc(var(--u) * 3) calc(var(--u) * 5);
  margin-block-end: calc(var(--u) * 4);
  font-size: 0.875rem;
}
.pat-knob { display: flex; flex-direction: column; gap: calc(var(--u)); }
.pat-knob output { font-variant-numeric: tabular-nums; color: var(--mut); }
.pat-toggle {
  font: inherit;
  font-size: 0.875rem;
  min-block-size: 2.75rem;
  padding: 0 calc(var(--u) * 4);
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  cursor: pointer;
}
.pat-toggle[aria-pressed="true"] { border-color: var(--acc-ink); color: var(--acc-ink); }
.pat-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--u) * 2) calc(var(--u) * 4);
  margin: calc(var(--u) * 3) 0 0;
}
.pat-note { font-size: 0.8125rem; color: var(--mut); }
.pat-out { margin-block: calc(var(--u) * 3) 0; }

/* 紙の上では押せない。つまみと「生成する」は出さず、プレビューとコードだけを残す。
   この面は上の規則より後に置く。@media は詳細度を上げないので、先に書くと
   あとから来る .pat-ctrl { display: flex } に負ける */
@media print {
  .pat-ctrl, .pat-actions { display: none; }
  h2:has(+ .pat-ctrl) { display: none; }   /* 中身の無くなった「調整する」も出さない */
  .pat-wrap { background: #fff; break-inside: avoid; }
}

/* ---- workbench widgets --------------------------------------------------- */
.wb-tool { margin-block: calc(var(--u) * 5); }
.wb-tool-in {
  display: flex; flex-wrap: wrap; gap: calc(var(--u) * 4) calc(var(--u) * 6);
  align-items: end; margin-block-end: calc(var(--u) * 4);
}
.wb-tool-in label { display: flex; flex-direction: column; gap: calc(var(--u)); font-size: 0.8125rem; color: var(--mut); }
.wb-pair { display: flex; align-items: center; gap: calc(var(--u) * 2); }
.wb-unit { font-size: 0.8125rem; color: var(--mut); font-variant-numeric: tabular-nums; min-inline-size: 3rem; }
.wb-tool-in select, .wb-tool-in input[type="number"], .wb-tool-in input[type="text"] {
  font: inherit; font-size: 0.9375rem; color: var(--ink); background: var(--bg);
  border: 0; border-block-end: 2px solid var(--rule); padding: calc(var(--u)) 0; min-inline-size: 8rem;
}
.wb-tool-in input[type="range"] { inline-size: 10rem; accent-color: var(--acc-ink); }
.wb-fieldset { border: 1px solid var(--line); padding: calc(var(--u) * 3); margin: 0; flex: 1 1 100%; }
.wb-fieldset legend { font-size: 0.75rem; color: var(--mut); padding-inline: calc(var(--u)); }
.wb-radio { display: inline-flex; align-items: center; gap: calc(var(--u)); margin-inline-end: calc(var(--u) * 4); font-size: 0.875rem; color: var(--ink); }
.wb-actions { margin: calc(var(--u) * 3) 0; }
.wb-gen { font: inherit; font-size: 0.8125rem; font-weight: 700; color: var(--ink); background: var(--bg);
  border: 1px solid var(--edge); padding: calc(var(--u) * 1.25) calc(var(--u) * 3); cursor: pointer; }
.wb-gen:hover { color: var(--acc-ink); border-color: var(--acc); }
.wb-live { margin-block-end: calc(var(--u) * 4); padding: calc(var(--u) * 4); border: 1px solid var(--line); background: var(--bg); }
.wb-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: calc(var(--u) * 3); }
.wb-card { padding: calc(var(--u) * 3); border: 1px solid var(--line); background: var(--paper); }
.wb-card.is-on { outline: 2px solid var(--acc-ink); outline-offset: 2px; }
.wb-ease-track { position: relative; block-size: 3rem; margin-block: calc(var(--u) * 3);
  background: linear-gradient(to right, var(--line) 0, var(--line) 1px, transparent 1px) 0 50% / 100% 1px no-repeat; }
.wb-ease-grid { display: flex; flex-direction: column; gap: calc(var(--u) * 2); }
.wb-ease-row { display: grid; grid-template-columns: 6.5rem 1fr; gap: calc(var(--u) * 3); align-items: center;
  padding: calc(var(--u) * 1.5); border: 1px solid transparent; cursor: pointer; }
.wb-ease-row.is-on { border-color: var(--acc-ink); background: var(--paper); }
.wb-ease-row .wb-ease-track { margin: 0; block-size: 2rem; }
.wb-ease-label { font-size: 0.8125rem; color: var(--mut); }
.wb-hint { font-size: 0.8125rem; color: var(--mut); margin: 0 0 calc(var(--u) * 3); }
.wb-ease-ball { position: absolute; inset-block-start: 50%; inline-size: 1.25rem; block-size: 1.25rem;
  margin-block-start: -0.625rem; border-radius: 50%; background: var(--acc-ink); transform: translateX(0); }
.wb-play { font: inherit; font-size: 0.8125rem; margin-block-end: calc(var(--u) * 3); padding: calc(var(--u)) calc(var(--u)*3);
  border: 1px solid var(--edge); background: var(--bg); cursor: pointer; }
.wb-state-box { min-block-size: 8rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u)*2); text-align: center; }
.wb-spin { inline-size: 1.5rem; block-size: 1.5rem; border: 2px solid var(--line); border-block-start-color: var(--acc-ink);
  border-radius: 50%; animation: wb-spin 0.8s linear infinite; }
@keyframes wb-spin { to { transform: rotate(360deg); } }
.wb-style-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: calc(var(--u)*3); }
.wb-style-card { padding: calc(var(--u)*3); border: 1px solid var(--line); cursor: pointer; min-block-size: 6rem; }
.wb-style-card.is-on { box-shadow: inset 0 0 0 2px var(--acc-ink); }
.wb-font-sample { font-size: 1.125rem; line-height: 1.6; margin: 0; }
.wb-font-sample small { display: block; font-size: 0.75rem; color: var(--mut); margin-block-start: calc(var(--u)*2); }
.wb-measure { max-inline-size: var(--wb-measure, 40rem); margin-inline: auto; }
.wb-measure p { margin: 0; line-height: 1.9; }
.wb-hsl-swatch { inline-size: 100%; block-size: 4rem; border: 1px solid var(--line); margin-block-end: calc(var(--u)*2); }
.wb-nav-demo { display: flex; flex-wrap: wrap; gap: calc(var(--u)*2); align-items: center; }
.wb-nav-demo a, .wb-nav-demo button { font: inherit; font-size: 0.8125rem; padding: calc(var(--u)*1.5) calc(var(--u)*3);
  border: 1px solid var(--line); background: var(--bg); color: var(--ink); text-decoration: none; }
.wb-nav-demo .is-cur { border-color: var(--acc-ink); color: var(--acc-ink); font-weight: 700; }
.wb-overlay-demo { position: relative; min-block-size: 10rem; }
.wb-overlay-panel { position: absolute; inset: 10% 15%; padding: calc(var(--u)*4); background: var(--paper);
  border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.wb-toast { padding: calc(var(--u)*2) calc(var(--u)*3); background: var(--ink); color: var(--bg); font-size: 0.8125rem; max-inline-size: 16rem; }
.wb-alert { padding: calc(var(--u)*2) calc(var(--u)*3); border-inline-start: 3px solid var(--acc-ink); background: var(--paper); font-size: 0.875rem; }
.wb-gauge { block-size: 0.5rem; background: var(--line); border-radius: 0; overflow: hidden; }
.wb-gauge i { display: block; block-size: 100%; background: var(--acc-ink); inline-size: var(--wb-pct, 50%); }
.wb-form-demo { display: grid; gap: calc(var(--u) * 3); max-inline-size: 20rem; }
.wb-form-demo label { display: grid; gap: calc(var(--u)); font-size: 0.8125rem; color: var(--mut); }
.wb-form-demo input { font: inherit; padding: calc(var(--u) * 1.5) calc(var(--u) * 2); border: 1px solid var(--line); background: var(--bg); }
.wb-form-demo input[aria-invalid="true"] { border-color: var(--bad); }
.wb-field-error { margin: 0; font-size: 0.8125rem; color: var(--bad); }
@media (max-width: 480px) { .wb-style-grid, .wb-cards { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .wb-ease-ball, .wb-spin { animation: none !important; transition: none !important; } }

/* ---- Phase F6: コード中心の子ページに置く実表示 ------------------------ */
.vx-live {
  margin-block: calc(var(--u) * 4) calc(var(--u) * 6);
  padding: clamp(1rem, 3vw, 2rem);
  border: 1px solid var(--line);
  background: var(--paper);
  overflow: hidden;
}
.vx-label, .vx-tag, .vx-caption {
  margin: 0 0 calc(var(--u) * 3);
  color: var(--mut);
  font-size: 0.75rem;
}
.vx-live :is(h3, p) { margin-block-start: 0; }
.vx-live button, .vx-live input, .vx-live summary, .vx-live a {
  font: inherit;
}
.vx-live button, .vx-live summary, .vx-live a {
  min-block-size: 44px;
  touch-action: manipulation;
}
.vx-live button:focus-visible, .vx-live input:focus-visible,
.vx-live summary:focus-visible, .vx-live a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
.vx-primary, .vx-disclosure {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--u) * 2) calc(var(--u) * 4);
  border: 1px solid var(--acc-ink);
  color: var(--color-on-accent);
  background: var(--acc-ink);
  cursor: pointer;
}
.vx-primary:hover, .vx-disclosure:hover { box-shadow: inset 0 0 0 2px currentColor; }
.vx-card { max-inline-size: 28rem; display: grid; gap: calc(var(--u) * 3); }
.vx-card h3, .vx-hero h3 { margin: 0; font-size: clamp(1.5rem, 4vw, 2.5rem); line-height: 1.1; }
.vx-kicker { color: var(--mut); font-size: 0.75rem; font-weight: 700; }
.vx-hero { max-inline-size: 40rem; display: grid; gap: calc(var(--u) * 3); }
.vx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--u) * 3); }
.vx-actions a { display: inline-flex; align-items: center; color: var(--acc-ink); }
.vx-fees { inline-size: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.vx-fees caption { margin-block-end: calc(var(--u) * 2); text-align: start; color: var(--mut); }
.vx-fees :is(th, td) { padding: calc(var(--u) * 2); border-block-end: 1px solid var(--line); text-align: start; }
.vx-fees td:last-child { text-align: end; font-size: 1.125rem; font-weight: 700; }
.vx-pair, .vx-logo-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 3); }
.vx-pair section { padding: calc(var(--u) * 3); border: 1px solid var(--line); background: var(--bg); }
.vx-jp { font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif; font-size: clamp(1rem, 2.5vw, 1.35rem); line-height: 1.8; }
.vx-loose { letter-spacing: 0.04em; }
.vx-palt { font-feature-settings: "palt" 1; }
.vx-num { display: grid; inline-size: min(20rem, 100%); }
.vx-num p { display: grid; grid-template-columns: 1fr 2.5rem; align-items: baseline; margin: 0; padding: calc(var(--u) * 2); border-block-end: 1px solid var(--line); }
.vx-num b { text-align: end; font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.vx-num small { padding-inline-start: calc(var(--u) * 2); color: var(--mut); }
.vx-mixed { font-family: Inter, "Segoe UI", "Yu Gothic", sans-serif; font-size: clamp(1.1rem, 3vw, 1.6rem); line-height: 1.7; overflow-wrap: anywhere; }
.vx-mixed span { white-space: nowrap; font-weight: 700; }
.vx-copy { display: grid; gap: calc(var(--u) * 2); }
.vx-copy p { display: grid; grid-template-columns: 4.5rem 1fr; gap: calc(var(--u) * 3); margin: 0; padding: calc(var(--u) * 3); border: 1px solid var(--line); background: var(--bg); }
.vx-copy span { color: var(--mut); font-size: 0.75rem; font-weight: 700; }
.vx-copy p:last-child { border-inline-start: 3px solid var(--good); }
.vx-search { display: flex; flex-wrap: wrap; align-items: end; gap: calc(var(--u) * 2); }
.vx-search label { flex: 1 0 100%; font-size: 0.8125rem; color: var(--mut); }
.vx-search input { flex: 1 1 14rem; min-block-size: 44px; padding-inline: calc(var(--u) * 2); border: 1px solid var(--line); background: var(--bg); color: var(--ink); }
.vx-search button { padding-inline: calc(var(--u) * 4); border: 1px solid var(--edge); background: var(--bg); color: var(--ink); cursor: pointer; }
.vx-status { min-block-size: 1.5rem; margin-block: calc(var(--u) * 2) 0; color: var(--good); }
.vx-disclosure { color: var(--ink); background: var(--bg); }
.vx-disclosure + div { padding: calc(var(--u) * 3); border: 1px solid var(--line); border-block-start: 0; }
.vx-disclosure + div p { margin: 0; }
.vx-nav { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 2); }
.vx-nav a { display: inline-flex; align-items: center; padding-inline: calc(var(--u) * 3); color: var(--ink); border: 1px solid var(--line); text-decoration: none; }
.vx-nav a[aria-current="page"] { color: var(--acc-ink); border-color: var(--acc-ink); font-weight: 700; box-shadow: inset 0 -2px 0 var(--acc-ink); }
.vx-motion-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 2); padding: 0; list-style: none; }
.vx-motion-cards li { padding: calc(var(--u) * 3); border: 1px solid var(--line); animation: vx-card-in 200ms var(--ease-out) backwards; }
.vx-motion-cards li:nth-child(2) { animation-delay: 80ms; }
.vx-motion-cards li:nth-child(3) { animation-delay: 160ms; }
@keyframes vx-card-in { from { opacity: 0; transform: translateY(12px); } }
.vx-details { border: 1px solid var(--line); }
.vx-details summary { display: flex; align-items: center; padding: calc(var(--u) * 2) calc(var(--u) * 3); cursor: pointer; }
.vx-details div { padding: 0 calc(var(--u) * 3) calc(var(--u) * 3); }
.vx-toast { inline-size: fit-content; margin-block: calc(var(--u) * 2) 0; padding: calc(var(--u) * 2) calc(var(--u) * 3); color: var(--bg); background: var(--ink); animation: vx-toast-in 200ms var(--ease-out); }
.vx-toast[hidden] { display: none; }
@keyframes vx-toast-in { from { opacity: 0; transform: translateY(8px); } }
.vx-logo-pair > div { display: grid; place-items: center; min-block-size: 9rem; border: 1px solid var(--line); }
.vx-logo-pair span, .vx-logo-switch > span { font-family: Georgia, serif; font-size: 2rem; font-weight: 700; }
.vx-logo-light { color: #1c1a17; background: #f7f4ed; }
.vx-logo-dark { color: #fff; background: #1c1a17; }
.vx-logo-switch { display: grid; gap: calc(var(--u) * 2); padding: calc(var(--u) * 4); color: var(--ink); background: var(--bg); border: 1px solid var(--line); }
.vx-logo-switch small { color: var(--mut); }
.vx-fav { display: flex; align-items: center; gap: calc(var(--u) * 3); }
.vx-fav span { display: grid; place-items: center; inline-size: 32px; block-size: 32px; color: #fff; background: #0c4a86; font-family: serif; font-weight: 700; }
.vx-fav p { margin: 0; font-weight: 700; }
@media (max-width: 560px) {
  .vx-pair, .vx-logo-pair, .vx-motion-cards { grid-template-columns: 1fr; }
  .vx-copy p { grid-template-columns: 1fr; gap: calc(var(--u)); }
}
@media (prefers-reduced-motion: reduce) {
  .vx-motion-cards li, .vx-toast { animation: none; }
}

/* ==== 降り口の共通部品（_tools/ia-spec.md §3 型1「絵で選ぶ」） ============ */

.pick {
  list-style: none;
  margin: calc(var(--u) * 5) 0 calc(var(--u) * 10);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--u) * 6) calc(var(--u) * 5);
}
.pick--wide {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-block-end: calc(var(--u) * 7);
}
.pick-i { min-inline-size: 0; }
.pick-a {
  display: block;
  color: var(--ink);
  text-decoration: none;
}
.pick-a img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  object-position: top center;
  background: var(--paper);
  border: 1px solid var(--line);
}
.pick--wide .pick-a img { aspect-ratio: 16 / 9; block-size: auto; }
.pick-t { display: block; padding-block-start: calc(var(--u) * 2); }
.pick-t b {
  display: block;
  font-size: 1.0625rem;
  line-height: 1.5;
  border-block-end: 1px solid transparent;
}
.pick-t small {
  display: block;
  margin-block-start: calc(var(--u));
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--mut);
}
.pick-a:hover .pick-t b,
.pick-a:focus-visible .pick-t b { border-block-end-color: currentColor; }
.pick-a:hover img { border-color: var(--ink); }
.pick-sub {
  display: block;
  margin-block-start: calc(var(--u) * 1.5);
  font-size: 0.8125rem;
  line-height: 1.8;
}
.pick-sub a {
  display: inline-block;
  margin-inline-end: calc(var(--u) * 2);
  padding-block: calc(var(--u) * 1.5);
  color: var(--mut);
}
.pick-sub a::before { content: "└ "; }

@media (max-width: 900px) {
  .pick,
  .pick--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .pick,
  .pick--wide { grid-template-columns: minmax(0, 1fr); }
}
@media print {
  .pick,
  .pick--wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ==== 逆引きの索引（v3.3 U2: 答えは場面ごとの子ページが持つ） ============= */

.rx-index {
  list-style: none;
  margin: calc(var(--u) * 5) 0 calc(var(--u) * 8);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 calc(var(--u) * 8);
}
.rxi {
  min-inline-size: 0;
  padding-block: calc(var(--u) * 3);
  border-block-end: 1px solid var(--line);
}
.rxi[hidden] { display: none; }
.rxi-a {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 2);
  color: var(--ink);
  text-decoration: none;
  padding-block: calc(var(--u) * 1.5);
}
.rxi-a b { font-size: 1.0625rem; border-block-end: 1px solid transparent; }
.rxi-a:hover b,
.rxi-a:focus-visible b { border-block-end-color: currentColor; }
.rxi-n {
  margin-inline-start: auto;
  font-variant-numeric: tabular-nums;
  font-size: 0.875rem;
  color: var(--mut);
  white-space: nowrap;
}
.rxi-e {
  display: block;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--mut);
}
.rx-sib {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 2) calc(var(--u) * 6);
  margin-block-start: calc(var(--u) * 10);
  padding-block-start: calc(var(--u) * 4);
  border-block-start: 1px solid var(--line);
  font-size: 0.9375rem;
}
.rx-sib a { padding-block: calc(var(--u) * 2); }

@media (max-width: 700px) {
  .rx-index { grid-template-columns: minmax(0, 1fr); }
}

/* ==== 用語索引の並べ替えと頭出し（v3.3 U2-c） ============================= */

.gl-sort { margin-block: calc(var(--u) * 5) calc(var(--u) * 4); }
.gl-tabs {
  display: flex;
  gap: calc(var(--u) * 2);
  border-block-end: 1px solid var(--line);
}
.gl-tabs button {
  appearance: none;
  background: none;
  border: 0;
  border-block-end: 3px solid transparent;
  margin-block-end: -1px;
  padding: calc(var(--u) * 3) calc(var(--u) * 3);
  font: inherit;
  font-size: 0.9375rem;
  color: var(--mut);
  cursor: pointer;
  min-block-size: 44px;
}
.gl-tabs button[aria-selected="true"] {
  color: var(--ink);
  font-weight: 700;
  border-block-end-color: var(--acc);
}
.gl-jump {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u));
  margin-block-start: calc(var(--u) * 3);
}
.gl-jump[hidden] { display: none; }
.gl-jump a {
  display: inline-flex;
  align-items: baseline;
  gap: calc(var(--u));
  min-inline-size: 44px;
  min-block-size: 44px;
  padding: calc(var(--u) * 2) calc(var(--u) * 2);
  justify-content: center;
  text-decoration: none;
  color: var(--ink);
  border: 1px solid var(--line);
}
.gl-jump a:hover,
.gl-jump a:focus-visible { border-color: var(--ink); }
.gl-jump i {
  font-style: normal;
  font-size: 0.75rem;
  color: var(--mut);
  font-variant-numeric: tabular-nums;
}
#gl-table tr[id] { scroll-margin-block-start: 5rem; }

/* ==== トップ「そのほかの引き方」（v3.3 U3: ナビから外した入口の置き場所） == */

.home-more {
  margin-block-start: calc(var(--u) * 6);
  padding-block-start: calc(var(--u) * 5);
  border-block-start: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(var(--u) * 4);
}
.home-more-h {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  color: var(--mut);
}
.home-more a {
  display: block;
  color: var(--ink);
  text-decoration: none;
  padding-block: calc(var(--u) * 2);
  min-block-size: 44px;
}
.home-more a b {
  display: block;
  font-size: 1rem;
  border-block-end: 1px solid transparent;
  width: fit-content;
}
.home-more a:hover b,
.home-more a:focus-visible b { border-block-end-color: currentColor; }
.home-more a span {
  display: block;
  margin-block-start: calc(var(--u));
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--mut);
}
@media (max-width: 900px) { .home-more { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .home-more { grid-template-columns: minmax(0, 1fr); } }

/* ==== ひと目で（コンタクトシート・v3.3 U7） ============================== */

.glance {
  margin-block: calc(var(--u) * 4) calc(var(--u) * 6);
  padding-block-end: calc(var(--u) * 4);
  border-block-end: 1px solid var(--line);
}
.glance-h {
  margin: 0 0 calc(var(--u) * 3);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  color: var(--mut);
}
.glance-h b { color: var(--ink); font-variant-numeric: tabular-nums; }
.glance-g {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
  gap: calc(var(--u) * 2) calc(var(--u) * 2);
}
.gl-c {
  display: block;
  color: var(--ink);
  text-decoration: none;
}
.gl-c img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  object-position: top center;
  border: 1px solid var(--line);
  background: var(--paper);
}
.gl-c span {
  display: block;
  margin-block-start: calc(var(--u));
  font-size: 0.6875rem;
  line-height: 1.5;
  color: var(--mut);
  overflow-wrap: anywhere;
}
.gl-c:hover img,
.gl-c:focus-visible img { border-color: var(--ink); }
.gl-c:hover span,
.gl-c:focus-visible span { color: var(--ink); }

@media (max-width: 480px) {
  /* 1列にすると縦に伸びすぎる。小さくても2列で見渡せるほうがよい */
  .pick,
  .pick--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .glance-g { grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); }
}

/* ==== 用語索引の絞り込みと、行ごとの表示（v3.3 U9） ====================== */

.gl-count {
  margin: calc(var(--u) * 2) 0 0;
  font-size: 0.8125rem;
  color: var(--mut);
  font-variant-numeric: tabular-nums;
}
.gl-jump button {
  appearance: none;
  display: inline-flex;
  align-items: baseline;
  gap: calc(var(--u));
  min-inline-size: 44px;
  min-block-size: 44px;
  padding: calc(var(--u) * 2);
  justify-content: center;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  cursor: pointer;
}
.gl-jump button:hover,
.gl-jump button:focus-visible { border-color: var(--ink); }
.gl-jump button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.gl-jump button[aria-pressed="true"] i { color: inherit; opacity: 0.75; }
.gl-jump button i {
  font-style: normal;
  font-size: 0.75rem;
  color: var(--mut);
  font-variant-numeric: tabular-nums;
}
.gl-all { font-weight: 700; }

/* ==== 長い一覧を畳む（v3.3 U9） ========================================== */

/* 選ぶ面が延々と縦に続くのは、階層で辿れていない合図。
   畳んだ見出しには中に何件あるかを出す。開く前に、開く価値が分かること。
   JavaScript は使わない（<details> の素の機能） */
.fold { border-block-start: 1px solid var(--line); }
.fold:last-of-type { border-block-end: 1px solid var(--line); }
.fold > summary {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 3);
  padding-block: calc(var(--u) * 3);
  cursor: pointer;
  list-style: none;
  font-size: 1rem;
  font-weight: 700;
  min-block-size: 44px;
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before {
  content: "＋";
  inline-size: 1.2em;
  font-weight: 400;
  color: var(--mut);
}
.fold[open] > summary::before { content: "－"; }
.fold > summary:hover,
.fold > summary:focus-visible { color: var(--brand); }
.fold-n {
  margin-inline-start: auto;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--mut);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fold-note {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--mut);
}
.fold > .fold-in { padding-block-end: calc(var(--u) * 5); }
.fold > .fold-in > :first-child { margin-block-start: 0; }
.fold + .fold { border-block-start: 0; }

@media print {
  .fold > .fold-in { display: block !important; }
}

/* ---- 件数の多い分類は、名前だけの詰めた格子で（v3.3 U9） ---------------- */

/* 54枚のパターンを説明つきの大きなカードで積むと 7.5 画面になり、
   「分類から選ぶ」が選ぶ面として働かない。説明はその先のページにある */
.pick--tight {
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: calc(var(--u) * 4) calc(var(--u) * 3);
  margin-block: calc(var(--u) * 2) calc(var(--u) * 2);
}
/* 分類の見出しは、その格子の札として詰めて置く */
h3:has(+ .pick--tight) { margin-block: calc(var(--u) * 4) 0; font-size: 1.0625rem; }
.pick--tight:last-of-type { margin-block-end: 0; }
.pick--tight .pick-t { padding-block-start: calc(var(--u) * 1.5); }
.pick--tight .pick-t b {
  font-size: 0.8125rem;
  line-height: 1.35;
}
@media (max-width: 480px) {
  .pick--tight { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
}

/* ---- 全ページ一覧は、名前だけを詰めて並べる（v3.3 U9） ----------------- */

.all-list {
  columns: 3;
  column-gap: calc(var(--u) * 6);
  list-style: none;
  margin: calc(var(--u) * 4) 0 calc(var(--u) * 7);
  padding: 0;
}
.all-list li {
  break-inside: avoid;
  margin-block-end: calc(var(--u) * 2);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.all-list .all-sub { padding-inline-start: 1.2em; font-size: 0.875rem; }
.all-list .all-sub::before { content: "└"; margin-inline-start: -1.2em; color: var(--mut); }
@media (max-width: 900px) { .all-list { columns: 2; } }
@media (max-width: 560px) { .all-list { columns: 1; } }

/* 調整欄の中の畳みは、狭い列に入るので縦に積む（v3.3 U10） */
.mat-controls .fold > summary {
  display: block;
  line-height: 1.6;
}
.mat-controls .fold .fold-note,
.mat-controls .fold .fold-n {
  display: inline;
  margin-inline-start: calc(var(--u) * 2);
}

/* ---- 逆引きの逆流し（v3.3 U10） ---------------------------------------- */

/* コード欄には、コードでないものが混ざっていた。
   行き先の案内はリンクへ、手順の一言は文へ描き分ける */
.rx-lead {
  margin-block: calc(var(--u) * 3) calc(var(--u) * 5);
  color: var(--mut);
  font-size: 0.9375rem;
}
.rx-q a { color: inherit; text-decoration: none; border-block-end: 1px solid var(--line); }
.rx-q a:hover,
.rx-q a:focus-visible { color: var(--brand); border-color: currentColor; }
.rx-do {
  margin-block-start: calc(var(--u) * 2);
  padding-inline-start: calc(var(--u) * 3);
  border-inline-start: 2px solid var(--rule);
  color: var(--ink);
  font-size: 0.875rem;
  line-height: 1.8;
}
.rx-go { margin-block-start: calc(var(--u) * 2); font-size: 0.875rem; }
.rx-go a { font-weight: 700; }
.rx-go a::before { content: "→ "; color: var(--mut); font-weight: 400; }
.rx-scene {
  margin-block-start: calc(var(--u) * 2);
  color: var(--mut);
  font-size: 0.8125rem;
}


/* ---- ページ内目次は横並び（v3.3 U12・右の欄をやめた） ------------------- */

.toc > ul {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 2) calc(var(--u) * 5);
}

@media (min-width: 901px) {
  .toc > summary { color: var(--mut); }
  .toc a { padding-block: calc(var(--u)); }
}

/* トップの素材見本に名前を添える（開くたびに変わるので、何かが分かるように） */
.home-material-name {
  display: block;
  margin-block-start: calc(var(--u) * 2);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ink);
}

/* ---- ナビは1列。分野は「作る順」の4群に畳む（v3.3 U13） ---------------- */

/* 21行を2列に畳んでいたのをやめた。2列が要る時点で、入口が平らすぎる合図。
   平時は9行（引き方5＋群4）。いま見ている群だけ開いて描く */
.nav ol.nav-one {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.nav .nav-g > summary {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 2);
  padding-block: calc(var(--u) * 1.5);
  min-block-size: 32px;
  cursor: pointer;
  list-style: none;
  font-size: 0.9375rem;
  color: var(--ink);
}
.nav .nav-g > summary::-webkit-details-marker { display: none; }
.nav .nav-g > summary::before {
  content: "＋";
  inline-size: 1em;
  color: var(--faint);
  font-size: 0.75rem;
}
.nav .nav-g[open] > summary::before { content: "－"; }
.nav .nav-g > summary:hover,
.nav .nav-g > summary:focus-visible { color: var(--acc-ink); }
.nav .nav-g.is-here > summary { font-weight: 700; }
.nav-n {
  margin-inline-start: auto;
  font-size: 0.75rem;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.nav .nav-g > ol { padding-inline-start: calc(var(--u) * 4); }
.nav .nav-g > ol > li > a { font-size: 0.9375rem; }

/* ───────────────────────────────────────────────────────────────
   DESIGN ATLAS の地図（v3.4 V2）

   2層でできている。SVG が島の面・岸・名前・リンクを持ち、canvas が
   海と島の等値線と、当たったときの隆起を描く。canvas が動き出したら
   SVG に置いた静止の等値線（.atlas-static）を隠す。二重に描かないため。

   島の色は `--island-h`（色相）1つだけを各リンクが持ち、
   面・岸・等値線の明度と彩度はここで決める。青紫は使わない（色相 240〜295 は空けてある）。
   名前は地の墨（--ink）のまま置く。淡い面の上で 4.5:1 を割らないため。
   ─────────────────────────────────────────────────────────────── */
.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
  gap: calc(var(--u) * 10);
  align-items: center;
  margin-block: calc(var(--u) * 4) calc(var(--u) * 12);
}
.home-hero-copy {
  min-width: 0;
  padding: 0;
}
.home-wordmark {
  display: block;
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  line-height: 1.08;
  letter-spacing: .02em;
  font-weight: 700;
}
.home-h1-sub {
  display: block;
  margin-block-start: calc(var(--u) * 2);
  font-size: 1rem;
  font-weight: 500;
  color: var(--mut);
  letter-spacing: .01em;
}
.home-lead { margin-block: calc(var(--u) * 4) 0; }
.home-guide {
  display: grid;
  min-block-size: 10.5rem;
  margin-block-start: calc(var(--u) * 3);
  padding: calc(var(--u) * 3);
  border: 1px solid var(--line);
  transition: border-color 160ms ease;
}
.home-guide > * { grid-area: 1 / 1; }
.home-hint {
  margin: 0;
  color: var(--mut);
  font-size: .9rem;
  transition: opacity 160ms ease;
}
.home-island-detail {
  align-self: start;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}
.home-island-name {
  margin: 0;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 700;
}
.home-island-description {
  margin: calc(var(--u) * 2) 0 0;
  color: var(--mut);
  font-size: .9rem;
  line-height: 1.75;
}
.home-guide.is-active .home-hint { opacity: 0; }
.home-guide.is-active {
  border-color: var(--acc-ink);
}
.home-guide.is-active .home-island-detail { opacity: 1; }

.atlas { min-width: 0; }
.atlas-stage { position: relative; aspect-ratio: 780 / 520; }
.atlas-map, .atlas-canvas {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
}
.atlas-canvas { pointer-events: none; }
/* canvas が動いている間だけ、SVG の静止した等値線を隠す */
.atlas.is-live .atlas-static { display: none; }

.atlas-ct { fill: none; stroke: var(--atlas-sea-line); stroke-width: .7; }

/* 島の色はここが正本。canvas はこの3つを読んで同じ色で塗る。
   片方だけ変えると、動いている状態と止まった状態で色が食い違う */
.atlas-island {
  cursor: pointer;
  --isle-fill:  hsl(var(--island-h) 34% 88%);
  --isle-hot:   hsl(var(--island-h) 42% 81%);
  --isle-shore: hsl(var(--island-h) 32% 40%);
}
.atlas-fill {
  fill: var(--isle-fill);
  transition: fill .28s cubic-bezier(.16, 1, .3, 1);
}
.atlas-shore {
  fill: none;
  stroke: var(--isle-shore);
  stroke-width: 1.4;
  transition: stroke-width .28s cubic-bezier(.16, 1, .3, 1);
}

/* 押す範囲は基準（削られていない最大）の形で、常に透明。
   動いている島はこの内側に収まるので、取りこぼしが起きない。
   fill: none にすると当たり判定まで消えるので transparent にする */
.atlas-hit { fill: transparent; }

/* canvas が動いているあいだ、SVG は押す範囲と名前だけを受け持つ */
.atlas.is-live .atlas-fill { fill: transparent; }
.atlas.is-live .atlas-shore { stroke: none; }
.atlas-name { fill: var(--ink); text-anchor: middle; font-weight: 700; }
/* 件数は --mut（薄い文字）だと、島の淡い面の上で 3.0:1 前後まで落ちる。
   この資料が v2 で自分の図から取り除いた種類の不足なので、島の色相で作り直す。
   明るい面では L=26%、暗い面では L=75% にすると、11色すべてで 4.5:1 を超える
   （当たったときの濃い面も含めて実測。最小 4.99 / 5.14） */
.atlas-count { fill: hsl(var(--island-h) 45% 26%); text-anchor: middle; }

.atlas-island:hover .atlas-fill,
.atlas-island:focus-visible .atlas-fill { fill: var(--isle-hot); }
.atlas-island:hover .atlas-shore,
.atlas-island:focus-visible .atlas-shore { stroke-width: 2.1; }
.atlas-island:focus { outline: none; }
.atlas-island:focus-visible .atlas-shore {
  stroke: hsl(var(--island-h) 40% 28%);
  stroke-dasharray: 5 3;
}

:root { --atlas-sea-line: #cdc6b8; }

/* 狭い画面。地図の文字が読めなくなるので、同じ11件を同じ順・同じ色で一覧にする */
.atlas-list { display: none; }
.atlas-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 calc(var(--u) * 2);
  padding: calc(var(--u) * 3) calc(var(--u) * 3.5);
  border: 1px solid var(--line);
  border-inline-start: 4px solid hsl(var(--island-h) 32% 45%);
  background: hsl(var(--island-h) 34% 95%);
  color: var(--ink);
  text-decoration: none;
}
.atlas-row + .atlas-row { margin-block-start: calc(var(--u) * 2); }
.atlas-row-name { font-weight: 700; }
/* 補助の文字も島の色相で作る。--mut のままだと、当たったときの面の上で
   4.07:1 まで落ちた。面 95% と 90% の両方で 4.5:1 を超える L=28% を使う */
.atlas-row b { color: hsl(var(--island-h) 42% 28%); font-weight: 400; font-size: .85rem; }
.atlas-row-blurb { grid-column: 1 / -1; color: hsl(var(--island-h) 42% 28%); font-size: .85rem; }
.atlas-row:hover { background: hsl(var(--island-h) 40% 90%); }

@media (max-width: 1200px) {
  .home-hero { grid-template-columns: minmax(0, 1fr); gap: calc(var(--u) * 6); }
  .home-guide { min-block-size: 7.5rem; }
}
@media (max-width: 499px) {
  .home-guide { display: none; }
  .atlas-stage { display: none; }
  .atlas-list { display: block; }
}

@media (prefers-color-scheme: dark) {
  :root { --atlas-sea-line: #423e39; }
  .atlas-island {
    --isle-fill:  hsl(var(--island-h) 20% 20%);
    --isle-hot:   hsl(var(--island-h) 24% 27%);
    --isle-shore: hsl(var(--island-h) 34% 62%);
  }
  .atlas-count { fill: hsl(var(--island-h) 35% 75%); }
  .atlas-island:focus-visible .atlas-shore { stroke: hsl(var(--island-h) 46% 76%); }
  .atlas-row {
    background: hsl(var(--island-h) 18% 16%);
    border-inline-start-color: hsl(var(--island-h) 34% 55%);
  }
  .atlas-row b, .atlas-row-blurb { color: hsl(var(--island-h) 32% 75%); }
  .atlas-row:hover { background: hsl(var(--island-h) 22% 21%); }
}

/* トップの節は1画面まで、分野一覧は4画面まで（ia-spec §4-b）。
   決める順の地図を原寸で置くと、どちらも上限を超えた。高さを抑え、
   原寸は図の下の「図を大きく見る」から開く */
/* 分野一覧は7つの層ごとに1行ずつ並ぶ。図の高さがそのまま7回積み上がるので、
   降り口の上限4画面に収まる高さへ抑える（ia-spec §4-b）。
   116px まで詰めると分野図が読めず「絵で選ぶ」にならなかったので、
   トップと重複していた決める順の地図を外し、そのぶんを図の高さに回した */
.page-fields .pick-i img { max-block-size: 168px; object-fit: contain; }

/* 層の見出しに添える一行は、7回くり返すと1画面ぶん積み上がる。詰める */
.page-fields h2 + p {
  margin-block: calc(var(--u) * -1) calc(var(--u) * 2);
  color: var(--mut);
  font-size: .92rem;
}

.page-top .fig-diagram img,
.page-fields .fig-diagram img {
  /* `inline-size: auto` にすると、外形を持たない SVG は幅が決まらず 2px に潰れる
     （実測。図が消えていた）。幅は 100% のままにして、高さだけ抑える */
  max-block-size: 30vh;
  object-fit: contain;
  object-position: left center;
}

@media (prefers-reduced-motion: reduce) {
  .atlas-fill, .atlas-shore,
  .home-guide, .home-hint, .home-island-detail { transition: none; }
}

/* ==== 作業台（bench/・v3.5） ============================================= */
/* サイドバー無しの版面。ナビは畳んだ帯として上に残す（狭い画面と同じ形） */
.layout-wide .shell { display: block; }
.layout-wide .nav {
  position: static;
  max-block-size: none;
  border-inline-end: 0;
  border-block-end: 2px solid var(--rule);
  margin-block-end: calc(var(--u) * 6);
}
.layout-wide .nav .brand { display: none; }
.layout-wide .nav-in { padding: calc(var(--u) * 2) 0 calc(var(--u) * 5); }
.layout-wide .nav ol { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); column-gap: calc(var(--u) * 5); }
@media (min-width: 901px) {
  html.js .layout-wide .nav > summary { display: flex; }
  .layout-wide .nav > summary { border-block-end: 0; }
  .layout-wide .main { padding-block-start: 0; }
}
.bench { margin-block-start: calc(var(--u) * 4); }
.bench-lead { max-inline-size: none; }
.bench-grid {
  display: grid;
  grid-template-columns: 20rem minmax(0, 1fr);
  column-gap: calc(var(--u) * 10);
  align-items: start;
}
.bench-knobs { display: grid; gap: calc(var(--u) * 4); align-content: start; min-inline-size: 0; }
/* 長い選択肢（repeat(auto-fit, …)）でつまみ列が広がらないよう、幅は列に従う */
.bench-knob select, .bench-knob input[type="text"], .bench-knob input[type="number"] { inline-size: 100%; max-inline-size: 100%; min-inline-size: 0; }
.bench-knobs h2, .bench-canvas h2, .bench-take h2 { margin-block-start: 0; }
.bench-knob { display: flex; flex-direction: column; gap: calc(var(--u) * 1.5); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; color: var(--mut); }
.bench-knob > span { display: flex; justify-content: space-between; gap: calc(var(--u) * 2); }
.bench-knob output { font-weight: 400; font-variant-numeric: tabular-nums; color: var(--ink); letter-spacing: 0; }
.bench-knob input[type="range"] { inline-size: 100%; accent-color: var(--acc); }
.bench-knob input[type="text"], .bench-knob input[type="number"], .bench-knob select {
  font: inherit; font-size: 0.9375rem; letter-spacing: 0; font-weight: 400; color: var(--ink);
  background: var(--bg); border: 1px solid var(--edge); border-radius: 0; padding: calc(var(--u) * 1.5) calc(var(--u) * 2); min-block-size: 2.5rem;
}
.bench-knob input[type="text"] { font-family: ui-monospace, Consolas, monospace; }
.bench-knob input[type="color"] { inline-size: 2.75rem; block-size: 2.5rem; padding: 0; border: 1px solid var(--edge); background: var(--bg); cursor: pointer; }
.bench-knob .tool-pair input[type="text"] { inline-size: 7.5em; }
.bench-canvas { min-inline-size: 0; }
.bench-view { display: flex; flex-wrap: wrap; align-items: end; gap: calc(var(--u) * 3) calc(var(--u) * 5); margin-block-end: calc(var(--u) * 3); }
.bench-widths { display: inline-flex; }
.bench-widths button, .bench-copy button, .bench-curve button {
  font: inherit; font-size: 0.875rem; min-block-size: 2.5rem; padding: 0 calc(var(--u) * 3);
  color: var(--ink); background: var(--bg); border: 1px solid var(--edge); cursor: pointer;
}
.bench-widths button + button { border-inline-start: 0; }
.bench-widths button:hover, .bench-copy button:hover { color: var(--acc-ink); border-color: var(--acc); }
.bench-knob-w { min-inline-size: 10rem; }
.bench-scale { font-size: 0.8125rem; color: var(--mut); }
.bench-shuffle { font: inherit; font-size: 0.875rem; min-block-size: 2.5rem; padding: 0 calc(var(--u) * 3); color: var(--ink); background: var(--bg); border: 1px solid var(--edge); cursor: pointer; }
.bench-shuffle:hover { color: var(--acc-ink); border-color: var(--acc); }
.bench-stage { position: relative; overflow: hidden; border: 1px solid var(--line); background: var(--paper); }
.bench-frame { display: block; border: 0; transform-origin: 0 0; inline-size: 375px; block-size: 600px; background: #fff; margin-inline: auto; }
.bench-frame[style*="scale"] { margin-inline: 0; }
.bench-knob input[aria-invalid="true"] { border-color: var(--bad); }
.bench-measure { font-size: 0.875rem; color: var(--mut); margin-block: calc(var(--u) * 2) 0; }
.bench-measure.is-over { color: var(--bad); }
.bench-take { margin-block-start: calc(var(--u) * 8); border-block-start: 1px solid var(--line); padding-block-start: calc(var(--u) * 5); }
.bench-copy { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--u) * 3); margin: 0 0 calc(var(--u) * 3); }
.bench-copy .tool-gen { font-weight: 700; }
.bench-copy button:disabled { opacity: 0.45; cursor: not-allowed; }
.bench-done { font-size: 0.875rem; color: var(--mut); }
.bench-gate, .bench-warn { list-style: none; margin: 0 0 calc(var(--u) * 3); padding: calc(var(--u) * 3) calc(var(--u) * 4); font-size: 0.875rem; }
.bench-gate { border-inline-start: 3px solid var(--bad); color: var(--bad); background: var(--paper); }
.bench-warn { border-inline-start: 3px solid var(--edge); color: var(--ink); background: var(--paper); }
.bench-gate[hidden], .bench-warn[hidden] { display: none; }
.bench-gate li + li, .bench-warn li + li { margin-block-start: calc(var(--u)); }
pre.bench-out { max-block-size: 28rem; overflow: auto; }
.bench-ladder { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 2px; margin-block: calc(var(--u) * 3) calc(var(--u) * 4); }
.bench-step { display: grid; place-items: center; block-size: 3rem; font-size: 0.75rem; }
.bench-step b { font-weight: 700; }
.bench-parts { columns: 2; column-gap: calc(var(--u) * 8); }
.bench-band { margin-block-start: calc(var(--u) * 8); border-block-start: 2px solid var(--rule); padding-block-start: calc(var(--u) * 4); }
.bench-band-h { margin: calc(var(--u) * 4) 0 calc(var(--u) * 2); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; color: var(--mut); }
.bench-band-links { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 2) calc(var(--u) * 6); margin: 0; }
.bench-themes { columns: 2; column-gap: calc(var(--u) * 8); margin: 0; }
.bench-go { margin: calc(var(--u) * -2) 0 calc(var(--u) * 4); padding: calc(var(--u) * 2) calc(var(--u) * 3); border-inline-start: 3px solid var(--acc); background: var(--paper); font-size: 0.9375rem; }
.bench-index { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: calc(var(--u) * 5); }
.bench-index li { border: 1px solid var(--line); padding: calc(var(--u) * 4); }
.bench-index a { display: block; font-size: 1.0625rem; margin-block-end: calc(var(--u) * 2); }
.bench-index span { display: block; font-size: 0.875rem; color: var(--mut); }
.bench-curve { margin-block-start: calc(var(--u) * 2); }
.bench-curve svg { display: block; inline-size: 100%; block-size: auto; max-inline-size: 20rem; touch-action: none; background: var(--paper); border: 1px solid var(--line); }
.bc-bg { fill: var(--bg); }
.bc-line { stroke: var(--edge); stroke-width: 1; fill: none; }
.bc-curve { stroke: var(--ink); stroke-width: 2; fill: none; }
.bc-h { fill: var(--acc); stroke: var(--bg); stroke-width: 2; cursor: grab; }
.bench-hr { border: 0; border-block-start: 1px solid var(--line); margin: calc(var(--u) * 2) 0; }
/* 影: 光の位置を掴んで動かす板 */
.bench-light { margin-block-start: calc(var(--u) * 2); }
.bl-pad { position: relative; inline-size: 100%; max-inline-size: 20rem; aspect-ratio: 1; background: var(--paper); border: 1px solid var(--line); touch-action: none; cursor: crosshair; }
.bl-card { position: absolute; inset-inline-start: 50%; inset-block-start: 50%; inline-size: 36%; block-size: 26%; transform: translate(-50%, -50%); background: var(--bg); border: 1px solid var(--line); box-shadow: 0 6px 16px rgba(0,0,0,.14); }
.bl-dot { position: absolute; inline-size: 18px; block-size: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--acc); border: 2px solid var(--bg); box-shadow: 0 0 0 1px var(--acc); cursor: grab; }
.bench-note { font-size: 0.8125rem; color: var(--mut); margin: calc(var(--u) * 2) 0; letter-spacing: 0; font-weight: 400; }
html.nojs .bench-knobs, html.nojs .bench-view, html.nojs .bench-copy { display: none; }
@media (max-width: 900px) {
  .bench-grid { grid-template-columns: minmax(0, 1fr); row-gap: calc(var(--u) * 6); }
  .bench-canvas { order: -1; }
  .bench-ladder { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .bench-parts, .bench-themes { columns: 1; }
}


/* ==== コードの隣に、そのコードで動く見本を置く（v3.3 U11） ============== */

/* 「コードだけがあって、使い道が分からない」を直す。
   上に見本、その下に書き換えられるコード。同じ1つの文字列を見て、そのままコピーする。
   左右に割ると見本が狭く、コードは改行が多くて見通しが悪い（依頼者の指摘 2026-09-06） */
.play {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(var(--u) * 4);
  margin-block: calc(var(--u) * 5) calc(var(--u) * 7);
  align-items: start;
}
.play-view { min-inline-size: 0; }
.play-frame {
  display: block;
  inline-size: 100%;
  max-inline-size: 100%;
  block-size: 12.5rem;
  border: 1px solid var(--line);
  background: var(--bg);
}
.play-cap {
  margin: calc(var(--u) * 1.5) 0 0;
  font-size: 0.75rem;
  color: var(--mut);
}
.play-edit { min-inline-size: 0; display: grid; gap: calc(var(--u) * 2); }
.play-knobs, .play-vars {
  display: grid;
  gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 2);
  border: 1px solid var(--line);
  background: var(--bg);
}
.play-knob {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
  gap: calc(var(--u) * 2);
  align-items: center;
  font: 0.75rem/1.4 ui-monospace, Consolas, monospace;
  color: var(--mut);
}
.play-knob-k { overflow-wrap: anywhere; }
.play-knob input[type=range] { inline-size: 100%; }
.play-knob select {
  font: inherit;
  padding: calc(var(--u) * 1) calc(var(--u) * 2);
  border: 1px solid var(--edge);
  background: var(--bg);
  color: var(--ink);
}
.play-knob output {
  font: inherit;
  min-inline-size: 3.5rem;
  text-align: end;
  color: var(--ink);
}
.play-var {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: calc(var(--u) * 2);
  align-items: center;
  font: 0.75rem/1.4 ui-monospace, Consolas, monospace;
  color: var(--mut);
}
.play-var-k { overflow-wrap: anywhere; }
.play-var input[type=color] {
  inline-size: 2.75rem;
  block-size: 2rem;
  padding: 0;
  border: 1px solid var(--edge);
  background: transparent;
  cursor: pointer;
}
.play-lab {
  font: 700 0.75rem/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: 0.08em;
  color: var(--mut);
}
.play-lab span { font-weight: 400; letter-spacing: 0; }
.play-src {
  inline-size: 100%;
  min-inline-size: 0;
  padding: calc(var(--u) * 3);
  font: 0.8125rem/1.75 ui-monospace, SFMono-Regular, Consolas, "Noto Sans Mono", monospace;
  color: var(--ink);
  background: var(--code);
  border: 1px solid var(--line);
  border-inline-start-width: 2px;
  resize: vertical;
  tab-size: 2;
  max-block-size: none;
  field-sizing: content;
}
.play-src:focus-visible { outline: 2px solid var(--acc-ink); outline-offset: 2px; }
.play-copy {
  justify-self: start;
  min-block-size: 40px;
  padding-inline: calc(var(--u) * 4);
  font: 700 0.8125rem/1 inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--edge);
  cursor: pointer;
}
.play-copy:hover,
.play-copy:focus-visible { border-color: var(--brand); color: var(--brand); }

/* task / inspect — 上:見本+HTML／下:つまみ+CSS */
.play-task,
.play-inspect {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
.play-view {
  display: grid;
  gap: calc(var(--u) * 2);
  min-inline-size: 0;
}
.play-task-body { min-inline-size: 0; display: grid; gap: calc(var(--u) * 3); }
.play-token-ref {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--mut);
}
.play-token-ref code { font-size: 0.75rem; }
.play-pane-lab {
  margin: 0 0 calc(var(--u) * 1.5);
  font: 700 0.75rem/1.4 ui-monospace, Consolas, monospace;
  letter-spacing: 0.06em;
  color: var(--mut);
}
.play-out, .play-out-css {
  margin: 0;
  padding: calc(var(--u) * 3);
  font: 0.8125rem/1.75 ui-monospace, Consolas, "Noto Sans Mono", monospace;
  color: var(--ink);
  background: var(--code);
  border: 1px solid var(--line);
  border-inline-start-width: 2px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.play-config { display: none; }
.play-knob-toggle {
  grid-template-columns: auto minmax(0, 1fr);
  cursor: pointer;
}
.play-knob-toggle input { margin: 0; }

@media (max-width: 860px) {
  .play-task,
  .play-inspect { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  .play { grid-template-columns: minmax(0, 1fr); }
  .play-frame { block-size: 11rem; }
}
@media print {
  .play { grid-template-columns: minmax(0, 1fr); }
  .play-frame { display: none; }
}
/* パターン集「コピーする」節の元型。pat-gen が読む。画面には出さない */
pre.pat-src { display: none; }
p.pat-copy-note {
  margin: calc(var(--u) * 3) 0 calc(var(--u) * 4);
  padding: calc(var(--u) * 3);
  border-inline-start: 2px solid var(--brand);
  background: var(--bg);
  font-size: 0.9375rem;
}



/* ==== wb_* 道具 ==== */
/* ---- 01-basics/composition ---- */
.cp-pane { border: 1px solid var(--line); background: var(--bg); padding: calc(var(--u) * 6) calc(var(--u) * 5); }
.cp-pane + .cp-pane { margin-block-start: calc(var(--u) * 5); }
.cp-h { margin: 0; font-size: 1.375rem; font-weight: 700; line-height: 1.35; }
.cp-lead { margin: calc(var(--u) * 2) 0 0; font-size: 0.9375rem; color: var(--mut); }
.cp-row { margin: calc(var(--u) * 4) 0 0; }
.cp-btn {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.5rem;
  padding: calc(var(--u) * 1.5) calc(var(--u) * 5);
  background: var(--acc-ink);
  color: var(--bg);
  font-size: 0.9375rem;
  font-weight: 700;
}
.cp-ph {
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  background:
    linear-gradient(to top right,
      transparent calc(50% - 0.5px), var(--line) calc(50% - 0.5px),
      var(--line) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    linear-gradient(to bottom right,
      transparent calc(50% - 0.5px), var(--line) calc(50% - 0.5px),
      var(--line) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    var(--paper);
}
.cp-ph span {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--mut);
  background: var(--paper);
  padding: calc(var(--u) * 0.5) calc(var(--u) * 2);
}
.cp-sym { text-align: center; }
.cp-sym .cp-ph-wide { block-size: 7rem; margin-block-start: calc(var(--u) * 5); }
.cp-asym {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: calc(var(--u) * 6);
  align-items: center;
}
.cp-asym .cp-ph-tall { align-self: stretch; min-block-size: 8rem; }
@media (max-width: 40em) {
  .cp-asym { grid-template-columns: 1fr; }
  .cp-asym .cp-ph-tall { min-block-size: 7rem; }
}

/* ---- 01-basics/four-principles ---- */
.fp-tool, .gs-tool, .cp-tool {
  margin-block: calc(var(--u) * 5);
  border-block-start: 1px solid var(--line);
  border-block-end: 1px solid var(--line);
  padding-block: calc(var(--u) * 5);
}
.fp-switch {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 2) calc(var(--u) * 6);
  align-items: center;
  border: 0;
  padding: 0;
  margin: 0 0 calc(var(--u) * 4);
}
.fp-switch legend {
  float: inline-start;
  padding: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--mut);
}
.fp-switch label {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 1.5);
  font-size: 0.9375rem;
  cursor: pointer;
}
.fp-switch input { margin: 0; accent-color: var(--acc-ink); }
.fp-switch label:has(input:checked) { color: var(--acc-ink); }
.fp-pane { border: 1px solid var(--line); background: var(--bg); padding: calc(var(--u) * 5); }
.fp-pane + .fp-pane { margin-block-start: calc(var(--u) * 4); }
#fp:has(#fp-v-b:checked) .fp-a { display: none; }
#fp:has(#fp-v-a:checked) .fp-b { display: none; }
.fp-cap, .gs-cap, .cp-cap {
  margin: 0 0 calc(var(--u) * 3);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--mut);
}
.fp-b-list p { margin: 0; }
.fp-b-list > * + * { margin-block-start: calc(var(--u) * 4); }
.fp-b-name { font-weight: 700; }
.fp-b-line { font-size: 0.9375rem; }
.fp-b-center { text-align: center; }
.fp-b-right { text-align: end; }
.fp-b-boxed { background: var(--paper); border: 1px solid var(--line); padding: calc(var(--u)) calc(var(--u) * 2); }
.fp-b-under { font-weight: 400; text-decoration: underline; }
.fp-a-grid { display: grid; gap: calc(var(--u) * 5); grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.fp-a-card {
  border: 1px solid var(--line);
  background: var(--paper);
  padding: calc(var(--u) * 4);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}
.fp-a-card p { margin: 0; }
.fp-a-name { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; color: var(--mut); }
.fp-a-price { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.fp-a-price span { font-size: 0.8125rem; font-weight: 400; color: var(--mut); }
.fp-a-desc { font-size: 0.9375rem; line-height: 1.7; }
.fp-why, .fp-links, .gs-note, .gs-links, .cp-note, .cp-links { font-size: 0.9375rem; }
.fp-why, .gs-note, .cp-note { margin-block: calc(var(--u) * 4) 0; }
.fp-links, .gs-links, .cp-links { margin-block: calc(var(--u) * 2) 0; }

/* ---- 01-basics/gestalt ---- */
.gs-wrap { display: grid; gap: calc(var(--u) * 5); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.gs-pane { border: 1px solid var(--line); background: var(--bg); padding: calc(var(--u) * 5); }
.gs-box { border: 1px solid var(--edge); }
.gs-box p { margin: 0; font-size: 0.9375rem; }
.gs-bh {
  font-weight: 700;
  background: var(--paper);
  border-block-end: 1px solid var(--edge);
  padding: calc(var(--u) * 2) calc(var(--u) * 3);
}
.gs-bi { border-block-end: 1px solid var(--line); padding: calc(var(--u) * 2) calc(var(--u) * 3); }
.gs-bi:last-child { border-block-end: 0; }
.gs-air p { margin: 0; font-size: 0.9375rem; }
.gs-ag + .gs-ag { margin-block-start: calc(var(--u) * 8); }
.gs-ah {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--mut);
  margin-block-end: calc(var(--u) * 2);
}
.gs-ai + .gs-ai { margin-block-start: calc(var(--u) * 2); }

/* ---- 01-basics/hierarchy ---- */
.hy-live { border: 1px solid var(--line); background: var(--bg); padding: calc(var(--u) * 6) calc(var(--u) * 5); }
.hy-card {
  max-inline-size: 26rem;
  margin-inline: auto;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: calc(var(--u) * 5);
}
.hy-h { margin: 0 0 calc(var(--u) * 2); font-size: 1.5rem; font-weight: 700; line-height: 1.35; }
.hy-p { margin: 0 0 calc(var(--u) * 4); font-size: 1rem; line-height: 1.8; }
.hy-p.hy-dim { color: var(--mut); }
.hy-act { margin: 0; }
.hy-live .hy-btn {
  min-block-size: 2.75rem;
  padding: calc(var(--u) * 2) calc(var(--u) * 5);
  font: inherit;
  font-weight: 700;
  background: var(--acc-ink);
  color: var(--bg);
  border: 1px solid transparent;
  cursor: pointer;
}

/* ---- 02-typography/japanese ---- */
.jp-clip { overflow: hidden; margin-block-end: calc(var(--u) * 4); }
.jp-live { inline-size: 320px; max-inline-size: 100%; border: 1px solid var(--edge); padding: calc(var(--u) * 3) calc(var(--u) * 4); line-break: strict; overflow-wrap: anywhere; }
.jp-live p { margin: 0; }

/* ---- 02-typography/spacing ---- */
.lh-wrap { max-inline-size: 640px; }
.lh-live { border: 1px solid var(--line); padding: calc(var(--u) * 4) calc(var(--u) * 5); margin-block-end: calc(var(--u) * 4); }
.lh-h { font-size: 1.1875rem; font-weight: 700; line-height: 1.35; letter-spacing: -0.02em; margin: 0 0 calc(var(--u) * 3); }
.lh-p { margin: 0 0 calc(var(--u) * 3); line-height: 1.8; }
.lh-p:last-child { margin-block-end: 0; }

/* ---- 02-typography/typefaces ---- */
.tf-rows { display: flex; flex-direction: column; gap: calc(var(--u) * 2); margin-block-end: calc(var(--u) * 4); }
.tf-row { display: block; border: 1px solid var(--line); padding: calc(var(--u) * 3) calc(var(--u) * 4); cursor: pointer; }
.tf-row.is-on { border-color: var(--acc-ink); box-shadow: inset 0 0 0 1px var(--acc-ink); }
.tf-meta { display: flex; align-items: center; gap: calc(var(--u) * 2); flex-wrap: wrap; margin-block-end: calc(var(--u) * 2); font-size: 0.8125rem; }
.tf-name { font-weight: 700; }
.tf-note { color: var(--mut); font-size: 0.75rem; }
.tf-s { display: block; font-size: 1.25rem; line-height: 1.6; overflow-wrap: anywhere; }
.tool input.tf-text { inline-size: min(22em, 78vw); font-family: inherit; }

/* ---- 02-typography/webfont ---- */
.wf-pick { margin-block-end: calc(var(--u) * 5); }
.wf-filter { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 3); align-items: end; }
.wf-q { display: grid; gap: calc(var(--u)); font-size: 0.8125rem; color: var(--mut); }
.wf-q input {
  min-inline-size: 14rem; min-block-size: 40px; padding: 0 calc(var(--u) * 2);
  font: inherit; color: var(--ink); background: var(--bg);
  border: 1px solid var(--edge);
}
.wf-cats { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 2); }
.wf-cats button {
  min-block-size: 40px; padding-inline: calc(var(--u) * 3);
  font: 700 0.8125rem/1 inherit; color: var(--ink); background: var(--bg);
  border: 1px solid var(--edge); cursor: pointer;
}
.wf-cats button[aria-pressed="true"] {
  background: var(--ink); color: var(--bg); border-color: var(--ink);
}
.wf-list {
  list-style: none; margin: calc(var(--u) * 3) 0 0; padding: 0;
  max-block-size: 19rem; overflow-y: auto;
  border: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.wf-list:focus-visible { outline: 2px solid var(--acc-ink); outline-offset: 2px; }
.wf-list li {
  display: grid; gap: 2px; padding: calc(var(--u) * 2) calc(var(--u) * 3);
  border-block-end: 1px solid var(--line); cursor: pointer; min-block-size: 44px;
  align-content: center;
}
.wf-list li[hidden] { display: none; }
.wf-list li[aria-selected="true"] { background: var(--ink); color: var(--bg); }
.wf-name { font-size: 1.0625rem; line-height: 1.4; }
.wf-meta { font-size: 0.6875rem; color: var(--mut); }
.wf-list li[aria-selected="true"] .wf-meta { color: inherit; opacity: 0.85; }
.wf-count { margin: calc(var(--u) * 2) 0 0; font-size: 0.75rem; color: var(--mut); }
.wf-text { min-inline-size: 16rem; }
.wf-live { border: 1px solid var(--line); padding: calc(var(--u) * 4) calc(var(--u) * 5); }
.wf-hide { visibility: hidden; }
.wf-head { font-size: 1.5rem; line-height: 1.35; font-weight: 700; margin: 0 0 calc(var(--u) * 2); }
.wf-body { margin: 0; }
.wf-status { font-size: 0.8125rem; color: var(--mut); margin: calc(var(--u) * 2) 0 calc(var(--u) * 4); min-block-size: 1.5em; }

/* ---- 03-color/attributes ---- */
/* wb_03 アクセントを作る */
.ca-live {
  display: grid;
  grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
  gap: calc(var(--u) * 5) calc(var(--u) * 8);
  align-items: start;
  margin-block-end: calc(var(--u) * 4);
}
.ca-card {
  background: #fff;
  color: #1c1a17;
  border: 1px solid var(--edge);
  border-block-start: 4px solid var(--ca-acc, #ba7336);
  padding: calc(var(--u) * 4) calc(var(--u) * 5);
}
.ca-badge {
  display: inline-block;
  margin: 0 0 calc(var(--u) * 2);
  padding: calc(var(--u) * 0.5) calc(var(--u) * 2);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: var(--ca-tint, #f5ebe3);
  color: var(--ca-txt, #965d2c);
}
.ca-title { margin: 0 0 calc(var(--u) * 2); font-size: 1.125rem; font-weight: 700; line-height: 1.4; }
.ca-body { margin: 0 0 calc(var(--u) * 3); font-size: 0.9375rem; line-height: 1.8; }
.tool .ca-link, .tool .ca-link:hover { color: var(--ca-txt, #965d2c); }
.ca-bar {
  display: block;
  inline-size: 56%;
  block-size: 6px;
  background: var(--ca-acc, #ba7336);
  margin-block-end: calc(var(--u) * 4);
}
.ca-act { margin: 0; }
.tool .ca-btn, .tool .ca-btn:hover {
  font-size: 0.875rem;
  font-weight: 700;
  color: #fff;
  background: var(--ca-txt, #965d2c);
  border: 1px solid transparent;
  padding: calc(var(--u) * 2) calc(var(--u) * 4);
}
@media (max-width: 900px) {
  .ca-live { grid-template-columns: minmax(0, 1fr); }
}

/* ---- 03-color/schemes ---- */
/* wb_03 配色を組む */
.cs-live { border: 1px solid var(--edge); margin-block-end: calc(var(--u) * 4); }
.cs-hero {
  background: var(--cs-bg, #faf7f5);
  color: var(--cs-text, #42372e);
  padding: calc(var(--u) * 8) calc(var(--u) * 6) calc(var(--u) * 7);
}
.cs-h1 { margin: 0 0 calc(var(--u) * 3); font-size: 1.375rem; font-weight: 700; line-height: 1.35; }
.cs-h1::after {
  content: "";
  display: block;
  inline-size: 3rem;
  block-size: 4px;
  background: var(--cs-acc, #ba7336);
  margin-block-start: calc(var(--u) * 2);
}
.cs-p { margin: 0 0 calc(var(--u) * 3); font-size: 0.9375rem; line-height: 1.8; }
.cs-act { margin: 0; }
.tool .cs-btn, .tool .cs-btn:hover {
  font-size: 0.875rem;
  font-weight: 700;
  color: #fff;
  background: var(--cs-atx, #925b2a);
  border: 1px solid transparent;
  padding: calc(var(--u) * 2) calc(var(--u) * 4);
}
.cs-band {
  background: var(--cs-surf, #eee8e2);
  color: var(--cs-text, #42372e);
  padding: calc(var(--u) * 5) calc(var(--u) * 6);
}
.cs-h2 { margin: 0 0 calc(var(--u) * 2); font-size: 1rem; font-weight: 700; }
.cs-band .cs-p { margin-block-end: 0; }
.tool .cs-link, .tool .cs-link:hover { color: var(--cs-atx, #925b2a); }
.cs-chips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 2) calc(var(--u) * 6);
  margin-block-end: calc(var(--u) * 4);
}
.cs-chip {
  margin: 0;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 2);
  font-size: 0.8125rem;
  color: var(--mut);
}
.cs-sw { inline-size: 1.25rem; block-size: 1.25rem; border: 1px solid var(--edge); flex: none; }
.cs-chip code { font-size: 0.75rem; }

/* ---- 04-layout/measure ---- */
/* ---- wb_0405: 04-layout/measure 版面を試す ---- */
.msr-advice { font-size: 0.875rem; margin: calc(var(--u) * 2) 0 calc(var(--u) * 4); }
.msr-stage { overflow: hidden; padding: calc(var(--u) * 4); background: var(--paper); border: 1px solid var(--line); }
/* プレビューの中は縮小前提の実寸px。字数の計算（1字=16px）と一致させる */
.msr-page { background: var(--bg); border: 1px solid var(--line); padding: 32px; transform-origin: 0 0;
  display: grid; grid-template-columns: minmax(0, 1fr); }
.msr-h { margin: 0 0 16px; font-size: 24px; line-height: 1.4; font-weight: 700; }
.msr-body p { margin: 0 0 16px; font-size: 16px; line-height: 1.9; }
.msr-body p:last-child { margin-block-end: 0; }
.msr-aside { border-inline-start: 1px solid var(--line); padding-inline-start: 16px; }
.msr-aside-h { margin: 0 0 8px; font-size: 13px; letter-spacing: 0.08em; color: var(--mut); }
.msr-aside ul { margin: 0; padding: 0; list-style: none; }
.msr-aside li { margin: 0 0 8px; font-size: 13px; line-height: 1.7; color: var(--mut); }
.msr-note { font-size: 0.8125rem; color: var(--mut); margin: calc(var(--u) * 2) 0 0; }

/* ---- 05-design-systems/components ---- */
/* ---- wb_0405: cmp 記入シート ---- */
.cmp-src { border: 1px solid var(--line); padding: calc(var(--u) * 2) calc(var(--u) * 3); margin: 0; }
.cmp-src legend { font-size: 0.75rem; color: var(--mut); padding-inline: calc(var(--u)); }
.cmp-radio { display: inline-flex; align-items: center; gap: calc(var(--u) * 1.5);
  margin-inline-end: calc(var(--u) * 4); font-size: 0.875rem; color: var(--ink); }
.cmp-status { font-size: 0.8125rem; color: var(--acc-ink); margin-inline-start: calc(var(--u) * 2); }
.cmp-note { font-size: 0.8125rem; color: var(--mut); margin: 0 0 calc(var(--u) * 3); }
.cmp-label { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em;
  color: var(--mut); margin-block-end: calc(var(--u) * 1.5); }
.cmp-sheet { inline-size: 100%; min-block-size: 24rem; font-family: ui-monospace, Consolas, monospace;
  font-size: 0.8125rem; line-height: 1.7; color: var(--ink); background: var(--bg);
  border: 1px solid var(--edge); border-radius: 0; padding: calc(var(--u) * 3); resize: vertical; }

/* ---- 05-design-systems/operations ---- */
/* ---- wb_0405: ops 記入シート ---- */
.ops-src { border: 1px solid var(--line); padding: calc(var(--u) * 2) calc(var(--u) * 3); margin: 0; }
.ops-src legend { font-size: 0.75rem; color: var(--mut); padding-inline: calc(var(--u)); }
.ops-radio { display: inline-flex; align-items: center; gap: calc(var(--u) * 1.5);
  margin-inline-end: calc(var(--u) * 4); font-size: 0.875rem; color: var(--ink); }
.ops-status { font-size: 0.8125rem; color: var(--acc-ink); margin-inline-start: calc(var(--u) * 2); }
.ops-note { font-size: 0.8125rem; color: var(--mut); margin: 0 0 calc(var(--u) * 3); }
.ops-label { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em;
  color: var(--mut); margin-block-end: calc(var(--u) * 1.5); }
.ops-sheet { inline-size: 100%; min-block-size: 24rem; font-family: ui-monospace, Consolas, monospace;
  font-size: 0.8125rem; line-height: 1.7; color: var(--ink); background: var(--bg);
  border: 1px solid var(--edge); border-radius: 0; padding: calc(var(--u) * 3); resize: vertical; }

/* ---- 06-components/choices ---- */
/* choices: 部品を決める */
.ch6-verdict { margin: 0 0 calc(var(--u) * 3); font-size: 0.9375rem; }
.ch6-verdict b { color: var(--acc-ink); }
.ch6-live { border: 1px solid var(--line); padding: calc(var(--u) * 4) calc(var(--u) * 5);
  margin-block-end: calc(var(--u) * 4); }
.ch6-live input { accent-color: var(--acc-ink); }
.ch6-fs { border: 0; margin: 0; padding: 0; display: grid; gap: calc(var(--u)); }
.ch6-fs legend { font-weight: 700; padding: 0; margin-block-end: calc(var(--u) * 2); }
.ch6-row { display: flex; gap: calc(var(--u) * 2); align-items: center; min-block-size: 2.25rem; }
.ch6-sel { display: grid; gap: calc(var(--u) * 2); justify-items: start; font-weight: 700; }

/* ---- 06-components/feedback ---- */
/* feedback: 知らせを試す */
.fb6-btns { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 2); margin-block-end: calc(var(--u) * 4); }
.fb6-stage { min-block-size: 5rem; border: 1px dashed var(--line); padding: calc(var(--u) * 4);
  margin-block-end: calc(var(--u) * 2); display: grid; align-content: center; }
.fb6-hint { margin: 0; color: var(--mut); font-size: 0.875rem; }
/* 中立・成功・失敗を、罫の色と面の色の両方で分ける。
   パターン集の alert-success-error と同じ組み立て */
.fb6-banner { display: flex; gap: calc(var(--u) * 3); align-items: center;
  padding: calc(var(--u) * 3) calc(var(--u) * 4);
  border: 1px solid var(--line); border-inline-start: 4px solid var(--line); }
.fb6-banner p { margin: 0; }
.fb6-good { border-inline-start-color: var(--acc-ink);
  background: color-mix(in srgb, var(--acc) 12%, transparent); }
.fb6-bad { border-inline-start-color: var(--bad); color: var(--bad); }
.fb6-spin { inline-size: 1rem; block-size: 1rem; flex: none; border-radius: 50%;
  border: 2px solid var(--line); border-block-start-color: var(--acc-ink);
  animation: fb6-spin 0.8s linear infinite; }
@keyframes fb6-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .fb6-spin { animation: none; } }
.fb6-log { margin: 0 0 calc(var(--u) * 4); font-size: 0.8125rem; color: var(--mut);
  font-family: ui-monospace, Consolas, monospace; }
.fb6-note { margin: 0 0 calc(var(--u) * 3); font-size: 0.8125rem; color: var(--mut); }
.fb6-sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; }

/* ---- 06-components/inputs ---- */
/* inputs: フィールドを組む */
.tool input.fi6-wide { inline-size: 20em; max-inline-size: 100%; font-family: inherit; }
.fi6-live { border: 1px solid var(--line); padding: calc(var(--u) * 5); margin-block-end: calc(var(--u) * 4); }
.fi6-field { display: grid; gap: calc(var(--u) * 2); justify-items: start; }
.fi6-field > label { font-weight: 700; }
.fi6-rq { font-weight: 400; color: var(--mut); }
.fi6-rq[hidden] { display: none; }
.tool .fi6-field input { font: inherit; inline-size: min(100%, 22rem);
  padding: calc(var(--u) * 2) calc(var(--u) * 3); border: 1px solid var(--edge);
  background: var(--bg); color: var(--ink); border-radius: 0; }
.tool .fi6-field input[aria-invalid="true"] { border-color: var(--bad); }
.fi6-help { margin: 0; font-size: 0.8125rem; color: var(--mut); }
.fi6-error { margin: 0; font-size: 0.8125rem; font-weight: 700; color: var(--bad); }
.fi6-help[hidden], .fi6-error[hidden] { display: none; }

/* ---- 06-components/navigation ---- */
/* navigation: 現在地で比べる */
.nv6-demo { border: 1px solid var(--line); margin-block-end: calc(var(--u) * 4); }
.nv6-head { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 3) calc(var(--u) * 5);
  align-items: center; justify-content: space-between;
  padding: calc(var(--u) * 3) calc(var(--u) * 4); border-block-end: 1px solid var(--edge); }
.nv6-logo { font-weight: 700; }
.nv6-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: calc(var(--u) * 4); }
.nv6-nav a { color: var(--ink); text-decoration: none; font-size: 0.9375rem;
  padding-block: calc(var(--u)); border-block-end: 2px solid transparent; }
.nv6-nav a[aria-current="page"] { font-weight: 700; color: var(--acc-ink);
  border-block-end-color: var(--acc-ink); }
.nv6-crumb { padding: calc(var(--u) * 2) calc(var(--u) * 4); border-block-end: 1px solid var(--line); }
.nv6-crumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap;
  gap: calc(var(--u) * 2); font-size: 0.8125rem; }
.nv6-crumb li + li::before { content: "›"; margin-inline-end: calc(var(--u) * 2); color: var(--faint); }
.nv6-crumb a { color: var(--mut); }
.nv6-crumb [aria-current="page"] { color: var(--ink); font-weight: 700; }
.nv6-body { padding: calc(var(--u) * 4); }
.nv6-body p { margin: 0; color: var(--mut); font-size: 0.875rem; }
.nv6-notes { font-size: 0.875rem; }
.nv6-links { font-size: 0.875rem; }
.nv6-links a { margin-inline-start: calc(var(--u) * 2); }

/* ---- 06-components/overlays ---- */
/* overlays: 開いて確かめる */
.ov6-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: calc(var(--u) * 4); margin-block-end: calc(var(--u) * 3); }
.ov6-cell { border: 1px solid var(--line); padding: calc(var(--u) * 4); }
.ov6-t { margin: 0 0 calc(var(--u) * 3); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.08em; color: var(--mut); }
.ov6-note { margin: calc(var(--u) * 3) 0 0; font-size: 0.8125rem; color: var(--mut); }
.ov6-fnote { margin: 0 0 calc(var(--u) * 3); font-size: 0.8125rem; color: var(--mut); }
.ov6-pop { position: relative; display: inline-block; }
.ov6-pop > summary { list-style: none; cursor: pointer; font-size: 0.875rem;
  padding: calc(var(--u) * 1.5) calc(var(--u) * 3); border: 1px solid var(--edge); }
.ov6-pop > summary::-webkit-details-marker { display: none; }
.ov6-pop[open] > summary { border-color: var(--acc-ink); color: var(--acc-ink); }
.ov6-panel { position: absolute; inset-block-start: calc(100% + var(--u)); inset-inline-start: 0;
  z-index: 10; min-inline-size: 11rem; display: grid; gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 3); background: var(--bg); border: 1px solid var(--edge); }
.ov6-panel label { display: flex; gap: calc(var(--u) * 2); align-items: center; font-size: 0.875rem; }
.ov6-dialog { padding: 0; border: 1px solid var(--edge); background: var(--bg);
  color: var(--ink); max-inline-size: 24rem; }
.ov6-dialog::backdrop { background: rgb(0 0 0 / 0.45); }
.ov6-dlg-in { padding: calc(var(--u) * 6); display: grid; gap: calc(var(--u) * 3); }
.ov6-dlg-in p { margin: 0; }
.ov6-dlg-h { font-size: 1.0625rem; }
.ov6-dlg-btns { display: flex; gap: calc(var(--u) * 2); justify-content: end; margin: 0; }
.tool .ov6-danger { color: var(--bad); border-color: var(--bad); }
.ov6-region { position: fixed; inset-block-end: calc(var(--u) * 5);
  inset-inline-end: calc(var(--u) * 5); z-index: 100; }
.ov6-toast { margin: 0; padding: calc(var(--u) * 3) calc(var(--u) * 5);
  background: var(--ink); color: var(--bg); animation: ov6-in 240ms ease-out; }
@keyframes ov6-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .ov6-toast { animation: none; } }

/* ---- 06-components/states ---- */
/* states: 4状態を試す */
.st6-live { margin-block-end: calc(var(--u) * 4); }
.st6-screen { border: 1px solid var(--line); max-inline-size: 26rem; }
.st6-ttl { margin: 0; padding: calc(var(--u) * 2) calc(var(--u) * 4); font-size: 0.8125rem;
  font-weight: 700; letter-spacing: 0.08em; color: var(--mut);
  border-block-end: 1px solid var(--line); }
.st6-body { padding: calc(var(--u) * 4); min-block-size: 11rem; }
.st6-empty { display: grid; gap: calc(var(--u) * 2); justify-items: center; text-align: center;
  padding-block: calc(var(--u) * 4); }
.st6-h { margin: 0; font-weight: 700; }
.st6-m { margin: 0; font-size: 0.875rem; color: var(--mut); }
.st6-cta { margin-block-start: calc(var(--u) * 2); }
.st6-skel { block-size: 2.5rem; background: var(--paper); animation: st6-pulse 1.2s ease-in-out infinite; }
.st6-skel + .st6-skel { margin-block-start: calc(var(--u) * 3); }
@keyframes st6-pulse { 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .st6-skel { animation: none; } }
.st6-err { display: grid; gap: calc(var(--u) * 3); justify-items: start; padding: calc(var(--u) * 4);
  border: 1px solid var(--line); border-inline-start: 4px solid var(--bad); }
.st6-err .st6-m { color: var(--bad); }
.st6-list { list-style: none; margin: 0; padding: 0; }
.st6-list li { display: flex; justify-content: space-between; gap: calc(var(--u) * 4);
  align-items: baseline; padding-block: calc(var(--u) * 2); border-block-end: 1px solid var(--line); }
.st6-list span { font-size: 0.8125rem; color: var(--mut); font-variant-numeric: tabular-nums; }
.st6-srx { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; }

/* ---- 06-components/validation ---- */
/* validation: 検証を通す */
.vd6-form { display: grid; gap: calc(var(--u) * 5); border: 1px solid var(--line);
  padding: calc(var(--u) * 5); margin-block-end: calc(var(--u) * 4); max-inline-size: 30rem; }
.vd6-field { display: grid; gap: calc(var(--u) * 2); justify-items: start; }
.vd6-field > label { font-weight: 700; }
.vd6-rq { font-weight: 400; color: var(--mut); }
.tool .vd6-field input { font: inherit; inline-size: min(100%, 20rem);
  padding: calc(var(--u) * 2) calc(var(--u) * 3); border: 1px solid var(--edge);
  background: var(--bg); color: var(--ink); border-radius: 0; }
.tool .vd6-field input[aria-invalid="true"] { border-color: var(--bad); }
.vd6-help { margin: 0; font-size: 0.8125rem; color: var(--mut); }
.vd6-err { margin: 0; font-size: 0.8125rem; font-weight: 700; color: var(--bad); }
.vd6-err:empty { display: none; }
.vd6-sum { padding: calc(var(--u) * 3) calc(var(--u) * 4); border: 1px solid var(--bad);
  color: var(--bad); }
.vd6-sum[hidden] { display: none; }
.vd6-sum p { margin: 0; }
.vd6-sum ul { margin: calc(var(--u) * 2) 0 0; padding-inline-start: 1.2em; }
.vd6-sum a { color: inherit; }
.vd6-actions { margin: 0; }
.vd6-done { margin: 0; font-weight: 700; color: var(--acc-ink); }
.vd6-done[hidden] { display: none; }

/* ---- 07-ux/ia ---- */
.u7-case { font-size: 0.8125rem; color: var(--mut); margin: 0 0 calc(var(--u) * 3); }
.u7-mode { margin-block-end: calc(var(--u) * 4); }
.u7-sheet { display: grid; gap: calc(var(--u) * 4); margin-block-end: calc(var(--u) * 4); }
.u7-field { display: grid; gap: calc(var(--u)); }
.u7-lab { font-size: 0.8125rem; font-weight: 700; color: var(--ink);
  display: flex; flex-wrap: wrap; gap: calc(var(--u)) calc(var(--u) * 2); align-items: baseline; }
.u7-lab small { font-weight: 400; font-size: 0.75rem; color: var(--mut); }
.u7-cnt { font-weight: 400; font-size: 0.75rem; color: var(--mut); font-variant-numeric: tabular-nums; }
.u7-sheet textarea, .u7-sheet input[type="text"] {
  font: inherit; font-size: 0.9375rem; line-height: 1.8; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line);
  padding: calc(var(--u) * 2) calc(var(--u) * 3); inline-size: 100%;
}
.u7-sheet textarea { resize: vertical; }
.u7-part { margin: calc(var(--u) * 2) 0 0; padding-block-start: calc(var(--u) * 3);
  border-block-start: 1px solid var(--line); font-weight: 700; font-size: 0.9375rem; }
html.nojs .u7-mode, html.nojs .u7-act { display: none; }

/* ---- 07-ux/writing ---- */
.uwr-rule { font-weight: 700; margin: calc(var(--u) * 4) 0 calc(var(--u) * 2); }
.uwr-case { border: 1px solid var(--line); background: var(--paper);
  padding: calc(var(--u) * 3); margin-block: calc(var(--u) * 3); }
.uwr-case.uwr-ng { background: transparent; }
.uwr-tag { margin: 0 0 calc(var(--u) * 2); font-size: 0.75rem; letter-spacing: 0.08em; color: var(--mut); }
.uwr-ng .uwr-tag { color: var(--bad); }
.uwr-demo { padding: calc(var(--u) * 3); border: 1px dashed var(--line); background: var(--bg); }
.uwr-why { font-size: 0.875rem; margin: calc(var(--u) * 2) 0 0; }
.uwr-note { margin: 0 0 calc(var(--u) * 2); font-size: 0.8125rem; color: var(--mut); }
.uwr-btn { font: inherit; font-size: 0.9375rem; padding: calc(var(--u) * 2) calc(var(--u) * 5);
  border: 1px solid var(--edge); background: var(--bg); color: var(--ink); cursor: default; }
.uwr-btn.uwr-pri { background: var(--acc-ink); color: var(--bg); border-color: transparent; }
.uwr-dlg, .uwr-done { max-inline-size: 24rem; border: 1px solid var(--edge);
  background: var(--paper); padding: calc(var(--u) * 4); }
.uwr-dlg-h { margin: 0 0 calc(var(--u) * 2); font-weight: 700; }
.uwr-dlg-b { margin: 0 0 calc(var(--u) * 3); font-size: 0.875rem; }
.uwr-done .uwr-dlg-b { margin-block-end: 0; }
.uwr-dlg-r { margin: 0; display: flex; flex-wrap: wrap; gap: calc(var(--u) * 2); justify-content: flex-end; }
.uwr-dlg-r .uwr-btn { font-size: 0.875rem; padding: calc(var(--u) * 1.5) calc(var(--u) * 3); }
.uwr-field { display: grid; gap: calc(var(--u)); max-inline-size: 22rem; }
.uwr-field span { font-size: 0.8125rem; color: var(--mut); }
.uwr-field input { font: inherit; font-size: 0.9375rem; padding: calc(var(--u) * 1.5) calc(var(--u) * 2);
  border: 1px solid var(--bad); background: var(--bg); color: var(--ink); }
.uwr-err { margin: 0; font-size: 0.8125rem; color: var(--bad); }
.uwr-empty { text-align: center; padding: calc(var(--u) * 6) calc(var(--u) * 4); }
.uwr-emp-h { margin: 0 0 calc(var(--u) * 2); font-weight: 700; }
.uwr-emp-b { margin: 0 0 calc(var(--u)); font-size: 0.875rem; }
.uwr-link { color: var(--acc-ink); text-decoration: underline; }
.uwr-copy { font: inherit; font-size: 0.75rem; color: var(--mut); background: var(--paper);
  border: 1px solid var(--line); padding: calc(var(--u)) calc(var(--u) * 2); cursor: pointer; }
.uwr-copy:hover { color: var(--acc-ink); border-color: var(--acc); }
.uwr-pat { font-size: 0.875rem; margin: calc(var(--u) * 4) 0 0; }

/* ---- 08-accessibility/aria ---- */
#wa .wa-live { margin-block-end: calc(var(--u) * 4); padding: calc(var(--u) * 4); border: 1px solid var(--line); min-block-size: 8rem; }
#wa .wa-row { margin: 0 0 calc(var(--u) * 2); display: flex; align-items: center; gap: calc(var(--u) * 2); flex-wrap: wrap; }
#wa .wa-hint { font-size: 0.8125rem; color: var(--mut); }
#wa .wa-tabs [role="tablist"] { display: flex; gap: calc(var(--u)); border-block-end: 1px solid var(--edge); }
#wa .wa-tabs [role="tab"] { border: 0; background: none; padding: calc(var(--u) * 1.5) calc(var(--u) * 3); color: var(--mut); }
#wa .wa-tabs [role="tab"][aria-selected="true"] { color: var(--ink); font-weight: 700; box-shadow: inset 0 -2px 0 var(--acc-ink); }
#wa .wa-tabs [role="tabpanel"] { padding: calc(var(--u) * 3) 0 0; }
#wa .wa-tabs [role="tabpanel"] p { margin: 0; }
#wa .wa-acc-h { margin: 0; font-size: 1rem; }
#wa .wa-acc-h button { display: block; inline-size: 100%; text-align: start; padding: calc(var(--u) * 2) calc(var(--u) * 3); }
#wa .wa-acc-h button::after { content: "＋"; float: inline-end; color: var(--mut); }
#wa .wa-acc-h button[aria-expanded="true"]::after { content: "−"; }
#wa .wa-acc [role="region"] { border: 1px solid var(--line); border-block-start: 0; padding: calc(var(--u) * 2) calc(var(--u) * 3); margin-block-end: calc(var(--u) * 2); }
#wa .wa-acc [role="region"] p { margin: 0; font-size: 0.9375rem; }
#wa .wa-dlg { border: 1px solid var(--edge); background: var(--bg); color: var(--ink); padding: calc(var(--u) * 5); max-inline-size: 24rem; }
#wa .wa-dlg::backdrop { background: rgba(0, 0, 0, 0.5); }
#wa .wa-dlg-h { margin: 0 0 calc(var(--u) * 2); font-size: 1.0625rem; }
#wa .wa-tipwrap, #wa .wa-menuwrap { position: relative; display: inline-block; }
#wa .wa-tip { position: absolute; inset-block-start: calc(100% + var(--u)); inset-inline-start: 0; background: var(--ink); color: var(--bg); font-size: 0.8125rem; padding: calc(var(--u)) calc(var(--u) * 2); white-space: nowrap; z-index: 5; }
#wa .wa-menu { position: absolute; inset-block-start: calc(100% + var(--u)); inset-inline-start: 0; margin: 0; padding: calc(var(--u)) 0; list-style: none; background: var(--bg); border: 1px solid var(--edge); min-inline-size: 9rem; z-index: 5; }
#wa .wa-menu li { margin: 0; }
#wa .wa-menu [role="menuitem"] { display: block; inline-size: 100%; text-align: start; border: 0; background: none; padding: calc(var(--u) * 1.5) calc(var(--u) * 3); font-size: 0.875rem; }
#wa .wa-menu [role="menuitem"]:hover, #wa .wa-menu [role="menuitem"]:focus { background: var(--paper); color: var(--acc-ink); }
#wa .wa-alert, #wa .wa-status { margin-block-start: calc(var(--u) * 2); padding: calc(var(--u) * 2) calc(var(--u) * 3); font-size: 0.875rem; background: var(--paper); }
#wa .wa-alert { border-inline-start: 3px solid var(--bad); }
#wa .wa-status { border-inline-start: 3px solid var(--acc-ink); }
#wa .wa-alert:empty, #wa .wa-status:empty { display: none; }
#wa .wa-notes { margin: 0 0 calc(var(--u) * 3); padding-inline-start: 1.2em; font-size: 0.8125rem; color: var(--mut); }
#wa .wa-notes li { margin-block: calc(var(--u) * 0.5); }

/* ---- 08-accessibility/structure ---- */
.ws-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: calc(var(--u) * 4); margin-block: calc(var(--u) * 4); }
.ws-col { border: 1px solid var(--line); padding: calc(var(--u) * 3) calc(var(--u) * 4); background: var(--paper); }
.ws-cap { margin: 0 0 calc(var(--u) * 2); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; }
.ws-cap-bad { color: var(--bad); }
.ws-cap-good { color: #95591c; }   /* 面 #f3efe8 の上で 4.92:1。--acc-ink は 4.35:1 で足りない */
.ws-tree { list-style: none; margin: 0; padding: 0; font-size: 0.9375rem; }
.ws-tree li { margin: 0; padding: calc(var(--u) * 1.25) 0; border-block-end: 1px solid var(--line); }
.ws-tree li:last-child { border-block-end: 0; }
.ws-tree code { font-size: 0.8125rem; color: var(--mut); margin-inline-end: calc(var(--u) * 2); }
.ws-tree .ws-l2 { padding-inline-start: calc(var(--u) * 5); }
.ws-tree .ws-l3 { padding-inline-start: calc(var(--u) * 10); }
.ws-tree .ws-l4 { padding-inline-start: calc(var(--u) * 15); }
.ws-note { display: block; font-style: normal; font-size: 0.8125rem; color: var(--bad); margin-block-start: calc(var(--u) * 0.5); }
.ws-hint { font-size: 0.875rem; color: var(--mut); }

/* ---- 08-accessibility/visual ---- */
.wv-stages { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: calc(var(--u) * 3); margin-block-end: calc(var(--u) * 4); }
.wv-stage { min-block-size: 8rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 3); padding: calc(var(--u) * 4); border: 1px solid var(--line); }
.wv-stage-1 { background: #ffffff; }
.wv-stage-2 { background: #1c1a17; }
.wv-stage-3 { background: linear-gradient(135deg, #4a6b50 0%, #3d5a45 45%, #5a4a35 100%); }   /* 文字 #f3efe8 が最も明るい停止色でも 5.22:1 */
.wv-cap { margin: 0; font-size: 0.75rem; letter-spacing: 0.08em; }
.wv-stage-1 .wv-cap { color: #6f6a62; }
.wv-stage-2 .wv-cap, .wv-stage-3 .wv-cap { color: #f3efe8; }
#wv .wv-btn { font: inherit; font-size: 0.875rem; color: #1c1a17; background: #f3efe8; border: 1px solid #78726a; padding: calc(var(--u) * 2) calc(var(--u) * 4); cursor: pointer; }
#wv.wv-on .wv-btn, #wv .wv-btn:focus-visible {
  outline: var(--wv-wi, 2px) solid var(--wv-in, #ffffff);
  outline-offset: 0;
  box-shadow: 0 0 0 calc(var(--wv-wi, 2px) + var(--wv-wo, 2px)) var(--wv-out, #000000);
}
.wv-note { font-size: 0.8125rem; color: var(--mut); margin: 0 0 calc(var(--u) * 3); }

/* ---- 08-accessibility/wcag ---- */
#wc .wc-grp { margin: calc(var(--u) * 5) 0 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; color: var(--mut); }
#wc .ck-note + .wc-sec .wc-grp { margin-block-start: calc(var(--u) * 2); }
#wc .wc-num { display: inline-block; font-family: ui-monospace, Consolas, monospace; font-size: 0.8125rem; color: var(--acc-ink); margin-inline-end: calc(var(--u)); }
#wc .ck input:checked + span .wc-num { color: var(--mut); }
#wc .wc-tag { display: inline-block; font-style: normal; font-size: 0.6875rem; letter-spacing: 0.05em; color: var(--mut); border: 1px solid var(--line); padding: 0 calc(var(--u) * 1.5); margin-inline-start: calc(var(--u) * 2); white-space: nowrap; }
#wc .ck-bar { margin-block-start: calc(var(--u) * 2); }
#wc-reset { margin-inline-start: auto; color: var(--mut); border-color: var(--line); }
@media print { #wc .wc-tag { border: 1px solid #000; color: #000; } }

/* ---- 09-motion/basics ---- */
.mb-hint { font-size: 0.8125rem; color: var(--mut); margin: 0 0 calc(var(--u) * 3); }
.mb-grid { display: flex; flex-direction: column; gap: calc(var(--u) * 2); margin-block-end: calc(var(--u) * 4); }
.mb-row { display: grid; grid-template-columns: 8.5rem 1fr; gap: calc(var(--u) * 3); align-items: center;
  padding: calc(var(--u) * 1.5); border: 1px solid transparent; border-radius: 0; cursor: pointer;
  font: inherit; text-align: start; color: inherit; background: none; inline-size: 100%; }
.mb-row.is-on { border-color: var(--acc-ink); background: var(--paper); }
.mb-label { font-family: ui-monospace, Consolas, monospace; font-size: 0.8125rem; color: var(--mut); }
.mb-track { position: relative; display: block; block-size: 2rem;
  background: linear-gradient(var(--line), var(--line)) 0 50% / 100% 1px no-repeat; }
.mb-ball { position: absolute; inset-block-start: 50%; inset-inline-start: 0;
  inline-size: 1.25rem; block-size: 1.25rem; margin-block-start: -0.625rem;
  border-radius: 50%; background: var(--acc-ink); transform: translateX(0); }
.mb-custom { padding-block-start: calc(var(--u) * 2); }
.mb-svg { inline-size: 100%; max-inline-size: 22rem; block-size: auto; }
.mb-label small { display: block; font-size: 0.6875rem; letter-spacing: 0; }
.mb-svg { display: block; touch-action: none; background: var(--paper); border: 1px solid var(--line); }
.mb-svg-bg { fill: var(--bg); }
.mb-svg-l { stroke: var(--edge); stroke-width: 1; fill: none; }
.mb-svg-c { stroke: var(--ink); stroke-width: 2; fill: none; }
.mb-svg-h { fill: var(--acc); stroke: var(--bg); stroke-width: 2; cursor: grab; }
@media (max-width: 480px) { .mb-row { grid-template-columns: 5.5rem 1fr; } }
@media (prefers-reduced-motion: reduce) { .mb-ball { transition: none !important; } }

/* ---- 09-motion/design ---- */
.md-total { margin: 0 0 calc(var(--u) * 3); font-size: 0.8125rem; color: var(--mut); font-variant-numeric: tabular-nums; }
.md-total.is-over { color: var(--bad); }
.md-note { font-size: 0.8125rem; color: var(--mut); margin: 0 0 calc(var(--u) * 3); }
.md-live { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: calc(var(--u) * 3);
  margin-block-end: calc(var(--u) * 4); padding: calc(var(--u) * 4); border: 1px solid var(--line); }
.md-card { padding: calc(var(--u) * 3); border: 1px solid var(--line); background: var(--paper); }
.md-card-t { margin: 0 0 calc(var(--u)); font-size: 0.875rem; font-weight: 700; }
.md-card-b { margin: 0; font-size: 0.8125rem; color: var(--mut); }
@keyframes md-in { from { opacity: 0; transform: translateY(var(--md-d, 12px)); } to { opacity: 1; transform: none; } }
.md-live.is-play .md-card { animation: md-in var(--md-dur, 240ms) cubic-bezier(0.16, 1, 0.3, 1) backwards; }
.md-live.is-play .md-card:nth-child(2) { animation-delay: var(--md-s1, 60ms); }
.md-live.is-play .md-card:nth-child(3) { animation-delay: var(--md-s2, 120ms); }
@media (prefers-reduced-motion: reduce) { .md-live .md-card { animation: none !important; } }

/* ---- 09-motion/performance ---- */
.mp-live { display: grid; gap: calc(var(--u) * 3); margin-block-end: calc(var(--u) * 4);
  padding: calc(var(--u) * 4); border: 1px solid var(--line); }
.mp-row { display: grid; grid-template-columns: 6.5rem 1fr; gap: calc(var(--u) * 3); align-items: center; }
.mp-tag { font-family: ui-monospace, Consolas, monospace; font-size: 0.75rem; color: var(--mut); }
.mp-track { position: relative; display: block; block-size: 2.75rem; border: 1px dashed var(--line); }
.mp-box { position: absolute; inset-block-start: 50%; left: 0; margin-block-start: -1rem;
  inline-size: 2rem; block-size: 2rem; background: var(--acc); border: 1px solid var(--acc-ink); }
.mp-note { font-size: 0.9375rem; margin: 0 0 calc(var(--u) * 3); }
.mp-steps-h { margin: 0 0 calc(var(--u)); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; color: var(--mut); }
.mp-steps { margin: 0 0 calc(var(--u) * 4); padding-inline-start: 1.5em; font-size: 0.9375rem; }
.mp-steps li { margin-block-end: calc(var(--u)); }
@keyframes mp-goleft { from { left: 0; } to { left: var(--mp-d, 12rem); } }
@keyframes mp-gotf { from { transform: translateX(0); } to { transform: translateX(var(--mp-d, 12rem)); } }
.mp-live.is-run .mp-a { animation: mp-goleft var(--mp-dur, 600ms) ease-in-out var(--mp-n, 2) alternate both; }
.mp-live.is-run .mp-b { animation: mp-gotf var(--mp-dur, 600ms) ease-in-out var(--mp-n, 2) alternate both; }
.mp-live.is-run.mp-only-tf .mp-a { animation: none; }
.mp-live.is-run.mp-only-left .mp-b { animation: none; }
@media (max-width: 480px) { .mp-row { grid-template-columns: 5rem 1fr; } }
@media (prefers-reduced-motion: reduce) { .mp-live .mp-box { animation: none !important; } }

/* ---- 10-implementation/layout-css ---- */
.lc-verdict { margin: 0 0 calc(var(--u) * 3); font-size: 0.9375rem; }
.lc-verdict b { color: var(--acc-ink); margin-inline-end: 0.5em; }
.lc-live { margin-block-end: calc(var(--u) * 4); padding: calc(var(--u) * 4); border: 1px solid var(--line); }
.lc-nav { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--u) * 2) calc(var(--u) * 5); }
.lc-nav a { padding: calc(var(--u) * 2) calc(var(--u) * 3); border: 1px solid var(--line); font-size: 0.875rem; }
.lc-cards { display: grid; gap: calc(var(--u) * 3); grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.lc-card { padding: calc(var(--u) * 3); border: 1px solid var(--line); background: var(--paper); }
.lc-card-t { margin: 0 0 calc(var(--u)); font-size: 0.875rem; font-weight: 700; }
.lc-card-b { margin: 0; font-size: 0.8125rem; color: var(--mut); }
.lc-cap { margin: calc(var(--u) * 2) 0 0; font-size: 0.8125rem; color: var(--mut); }
.lc-formd { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: calc(var(--u) * 3) calc(var(--u) * 4); align-items: center; }
.lc-lb { font-size: 0.875rem; }
.lc-in { display: block; block-size: 2.25rem; border: 1px solid var(--edge); background: var(--bg); }
.lc-in-ta { block-size: 4.5rem; }
.lc-centerd { display: grid; place-items: center; min-block-size: 10rem; border: 1px dashed var(--line); }
@media (max-width: 480px) { .lc-formd { grid-template-columns: 5.5rem minmax(0, 1fr); } }

/* ---- 10-implementation/speed ---- */
html.nojs .sv-bar { display: none; }
.sv-reset { font: inherit; font-size: 0.8125rem; color: var(--mut); background: var(--bg);
  border: 1px solid var(--line); border-radius: 0; padding: calc(var(--u)) calc(var(--u) * 3);
  cursor: pointer; margin-inline-start: auto; }
.sv-reset:hover { color: var(--acc-ink); border-color: var(--acc); }
.sv-snip { display: block; margin-block-start: calc(var(--u) * 1.5); padding: calc(var(--u)) calc(var(--u) * 2);
  font-family: ui-monospace, Consolas, monospace; font-size: 0.75rem; color: var(--mut);
  background: var(--paper); border: 1px solid var(--line);
  white-space: pre-wrap; overflow-wrap: anywhere; }
.ck label:hover .sv-snip { color: var(--mut); }

/* ---- 11-branding/identity ---- */
/* wb_1113 共通: 記入テンプレの form（media / choosing / brief からも使う） */
.wbt-form { display: grid; gap: calc(var(--u) * 3); margin-block-end: calc(var(--u) * 3); }
.wbt-form > label {
  display: grid; gap: calc(var(--u));
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.04em; color: var(--mut);
}
.wbt-form textarea, .wbt-form input[type="text"] {
  font: inherit; font-size: 0.9375rem; font-weight: 400; line-height: 1.7;
  color: var(--ink); background: var(--bg);
  border: 1px solid var(--edge); border-radius: 0;
  padding: calc(var(--u) * 1.5) calc(var(--u) * 2);
  inline-size: 100%; max-inline-size: 38rem;
}
.wbt-form textarea { resize: vertical; }
.wbt-form select {
  justify-self: start;
  font: inherit; font-size: 0.9375rem; font-weight: 400; color: var(--ink);
  background: var(--bg); border: 0; border-block-end: 2px solid var(--rule);
  border-radius: 0; padding: calc(var(--u)) calc(var(--u) * 2) calc(var(--u)) 0;
}
.wbt-acts { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 2); margin: 0 0 calc(var(--u) * 3); }

/* ---- 11-branding/logo ---- */
/* 11-branding/logo: クリアスペースと最小サイズ */
.blg-fig {
  border: 1px solid var(--line); background: var(--paper);
  padding: calc(var(--u) * 3); margin-block-end: calc(var(--u) * 3);
}
.blg-fig svg { display: block; inline-size: 100%; block-size: auto; }
.blg-sizes {
  display: flex; flex-wrap: wrap; gap: calc(var(--u) * 5);
  align-items: flex-end; margin-block: calc(var(--u) * 4) calc(var(--u) * 2);
}
.blg-size { display: grid; gap: calc(var(--u)); justify-items: start; }
.blg-size svg { display: block; }
.blg-size span { font-size: 0.75rem; color: var(--mut); }
.blg-tglbox { margin-block-start: calc(var(--u) * 2); }
.blg-tgllab { font-size: 0.875rem; cursor: pointer; margin-inline-start: calc(var(--u)); }
.blg-demo {
  display: flex; align-items: center; gap: 24px;
  border: 1px solid var(--edge); background: var(--bg);
  padding: calc(var(--u) * 3) calc(var(--u) * 4);
  margin-block: calc(var(--u) * 2); overflow-x: auto;
}
.blg-demo svg { display: block; flex: none; }
.blg-demo-nav { display: flex; gap: calc(var(--u) * 4); font-size: 0.875rem; color: var(--mut); white-space: nowrap; }
#blg-tgl:checked ~ .blg-demo { gap: 2px; }
#blg-tgl:checked ~ .blg-demo .blg-demo-nav { gap: calc(var(--u) * 2); }
.blg-cap { font-size: 0.8125rem; color: var(--mut); margin-block: 0 calc(var(--u) * 4); }
.blg-cap .blg-cap-ng { display: none; }
#blg-tgl:checked ~ .blg-cap .blg-cap-ok { display: none; }
#blg-tgl:checked ~ .blg-cap .blg-cap-ng { display: inline; }

/* ---- 12-styles/catalog ---- */
/* 12-styles/catalog: 実物2枚の2面比較 */
.stc-pick { display: flex; flex-wrap: wrap; align-items: end; gap: calc(var(--u) * 3) calc(var(--u) * 4); margin-block-end: calc(var(--u) * 4); }
.stc-sel { display: flex; flex-direction: column; gap: calc(var(--u)); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; color: var(--mut); }
.stc-sel select { font: inherit; font-size: 0.9375rem; font-weight: 400; letter-spacing: 0; color: var(--ink); background: var(--bg); border: 1px solid var(--edge); padding: calc(var(--u) * 1.5) calc(var(--u) * 2); min-block-size: 2.5rem; min-inline-size: 14rem; }
.stc-swap { font: inherit; font-size: 1.125rem; min-block-size: 2.5rem; min-inline-size: 2.5rem; color: var(--ink); background: var(--bg); border: 1px solid var(--edge); cursor: pointer; }
.stc-swap:hover { color: var(--acc-ink); border-color: var(--acc); }
.stc-note { font-size: 0.8125rem; color: var(--mut); }
.stc-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 4); }
.stc-side { margin: 0; }
.stc-side figcaption { font-size: 0.8125rem; font-weight: 700; margin-block-end: calc(var(--u)); }
.stc-frame { display: block; inline-size: 100%; block-size: min(640px, 80vw); border: 1px solid var(--line); background: #fff; }
.stc-open { display: inline-block; margin-block-start: calc(var(--u) * 2); font-size: 0.875rem; }
.stc-diff { inline-size: 100%; border-collapse: collapse; margin-block-start: calc(var(--u) * 6); font-size: 0.9375rem; }
.stc-diff th, .stc-diff td { text-align: start; vertical-align: top; padding: calc(var(--u) * 2.5) calc(var(--u) * 3); border-block-end: 1px solid var(--line); }
.stc-diff thead th { font-size: 0.75rem; letter-spacing: 0.08em; color: var(--mut); border-block-end: 2px solid var(--rule); }
.stc-diff tbody th { inline-size: 7em; font-weight: 700; color: var(--mut); }
.stc-diff td small { display: block; font-family: ui-monospace, Consolas, monospace; font-size: 0.75rem; color: var(--mut); margin-block-start: calc(var(--u) * 0.5); }
@media (max-width: 700px) {
  .stc-pair { grid-template-columns: minmax(0, 1fr); }
  .stc-frame { block-size: 480px; }
  .stc-sel select { min-inline-size: 0; }
}

/* ---- 12-styles/choosing ---- */
/* 12-styles/choosing: 2軸4象限 */
.stp-map {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: calc(var(--u) * 2); align-items: center; justify-items: center;
  margin-block-end: calc(var(--u) * 4);
}
.stp-ax { font-size: 0.75rem; letter-spacing: 0.15em; color: var(--mut); }
.stp-ax-t { grid-area: 1 / 2; }
.stp-ax-b { grid-area: 3 / 2; }
.stp-ax-l { grid-area: 2 / 1; }
.stp-ax-r { grid-area: 2 / 3; }
.stp-cells {
  grid-area: 2 / 2; inline-size: 100%;
  display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u));
}
.stp-cells button {
  font: inherit; font-size: 0.875rem; min-block-size: 4.5rem;
  padding: calc(var(--u) * 3) calc(var(--u) * 2);
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--edge); cursor: pointer;
}
.stp-cells button:hover { color: var(--acc-ink); border-color: var(--acc); }
.stp-cells button.is-on {
  outline: 2px solid var(--acc-ink); outline-offset: -2px;
  background: var(--paper); font-weight: 700;
}
.stp-out {
  border-inline-start: 3px solid var(--acc);
  padding-inline-start: calc(var(--u) * 3);
  margin-block-end: calc(var(--u) * 4);
}
.stp-cand { margin: 0 0 calc(var(--u)); font-weight: 700; }
.stp-why { margin: 0; color: var(--mut); font-size: 0.9375rem; }

/* ---- 14-seo/title ---- */
.seo-t { margin-block: calc(var(--u) * 5); }
.seo-t label { display: block; font-size: 0.875rem; color: var(--mut); }
.seo-t input, .seo-t textarea {
  inline-size: 100%;
  margin-block-start: calc(var(--u) * 2);
  padding: calc(var(--u) * 3);
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 2px;
}
.seo-t textarea { min-block-size: 5.5em; resize: vertical; }
.seo-out {
  margin-block-start: calc(var(--u) * 4);
  padding: calc(var(--u) * 4);
  border: 1px solid var(--line);
  background: var(--surface);
}
.seo-line { font-size: 1.0625rem; line-height: 1.7; word-break: break-all; }
.seo-line b { font-weight: 400; }
.seo-line s {
  text-decoration: none;
  color: var(--mut);
  background: color-mix(in srgb, var(--mut) 14%, transparent);
}
.seo-note {
  margin-block-start: calc(var(--u) * 3);
  font-size: 0.875rem;
  line-height: 1.8;
  color: var(--mut);
}
.seo-note b { color: var(--ink); font-variant-numeric: tabular-nums; }
.seo-ng { color: var(--bad, #a1341f); }
/* ---- ボタン道具のプレビュー（.button 系統） ------------------------------ */

.bt-live .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 2);
  min-block-size: 2.75rem;
  padding: calc(var(--u) * 2) calc(var(--u) * 6);
  font: inherit;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
}
.bt-live .button--primary { background: var(--acc-ink); color: var(--bg); }
.bt-live .button--secondary {
  background: var(--bg);
  color: var(--acc-ink);
  border-color: var(--acc-ink);
}
.bt-live .button:disabled { opacity: 0.45; cursor: not-allowed; }
.bt-live .button__spin {
  inline-size: 1em;
  block-size: 1em;
  border: 2px solid currentColor;
  border-block-end-color: transparent;
  border-radius: 50%;
  animation: tool-spin 0.8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .bt-live .button__spin { animation-duration: 2.4s; }
}