/* style.css — 枠組は使わない。値は gen/design.json だけから来る（TOKENS の行が焼くときに差し替わる）。
   円・角丸・既製フォントの直描きは使わない。角は角のまま。 */
:root{--paper:#efe7d8;--paper2:#e5dbc8;--ink:#191512;--ink2:#3d352c;--faint:#5d5346;--rule:#c3b69d;--shu:#8f2f22;--shu-p:#7c2a1e;--night:#141210;--night2:#1e1a16;--on-night:#e9e0cf;--on-night-faint:#b4a58c;--focus:#c8892a;--rule-night:#4b4842;--fs:17px;--lh:1.9;--measure:34ch;--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:72px;--s9:108px;--grain:url("data:image/png;base64,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");}.legend i.b-kaiwa{background:#4c6b63}.legend i.b-ta{background:#6b5730}.legend i.b-ru{background:#3f5872}.legend i.b-da{background:#6a4a58}.legend i.b-nai{background:#5a5f3a}.legend i.b-q{background:#7a5a2b}.legend i.b-taigen{background:#7c3f2c}.legend i.b-other{background:#4a443c}.gap-t{margin-top:var(--s2)}

@font-face {
  font-family: 'Sumi Mincho';
  src: url('type/sumi-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Sumi Mincho';
  src: url('type/sumi-bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Sumi Mincho MS';
  src: url('type/sumi-ms.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0020-007E, U+3000-30FF, U+4E00-9FFF, U+FF01-FF5E, U+2010-201F, U+2026;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: 'Sumi Mincho', 'Sumi Mincho MS', serif;
  font-size: var(--fs); line-height: var(--lh);
  font-feature-settings: 'palt' 1;
  background-image: var(--grain);
  background-repeat: repeat;
}

/* 見出しの並びは h1 → h2 → h3 だけ。飛ばさない。 */
h1, h2, h3 { font-weight: 700; line-height: 1.35; margin: 0; letter-spacing: 0.01em; }
h1 { font-size: clamp(1.5rem, 5.2vw, 2.6rem); }
h2 { font-size: clamp(1.22rem, 3.6vw, 1.72rem); }
h3 { font-size: clamp(1.02rem, 2.4vw, 1.14rem); }
.instrument h3 { margin-top: var(--s6); }
p, li, dd, dt, td, th, figcaption { font-size: inherit; }
p { margin: 0 0 var(--s4); }
a { color: var(--shu-p); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-style: dotted; }

:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 3px;
}
/* 紙の場面では金では見えないので朱に変える（地色との差を先に測ってある） */
header.crest :focus-visible, .hero :focus-visible, .paper-scope :focus-visible, .skip:focus-visible { outline-color: var(--shu-p); }
input[type=checkbox] { accent-color: var(--focus); width: 1.02em; height: 1.02em; }
.paper-scope input[type=checkbox] { accent-color: var(--shu-p); }
.skip {
  position: absolute; left: var(--s3); top: -100px; z-index: 40;
  background: var(--paper); color: var(--ink); padding: var(--s2) var(--s3);
  border: 1px solid var(--ink);
}
.skip:focus { top: var(--s2); }

/* 頭の帯。貼り付くが、画面の高さの 1/6 を越えない高さで作る。 */
.crest {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s2) var(--s3);
  background: var(--paper2); border-bottom: 1px solid var(--rule);
}
.crest .seal { width: 26px; height: 26px; flex: 0 0 auto; display: block; }
.crest .mark { font-weight: 700; font-size: 1.08rem; letter-spacing: 0.16em; }
.crest .romaji {
  font-size: 0.66rem; letter-spacing: 0.34em; color: var(--faint);
  margin-inline-start: auto; text-transform: none;
}

.wrap { max-width: 62rem; margin: 0 auto; padding: 0 var(--s3); }
.hero { padding: var(--s6) 0 var(--s5); border-bottom: 1px solid var(--rule); }
.hero .lead { max-width: 34em; margin-top: var(--s3); color: var(--ink2); }
.hero .kana { font-size: 0.72rem; letter-spacing: 0.4em; color: var(--faint); display: block; margin-bottom: var(--s2); }
.hero .tag { color: var(--shu-p); margin-top: var(--s2); }

section.slab { padding: var(--s5) 0; border-bottom: 1px solid var(--rule); }
section.slab > h2 { margin-bottom: var(--s3); }
.sub { color: var(--faint); max-width: 36em; }

/* 計器の面。暗い地の上に置く。 */
.instrument { background: var(--night); color: var(--on-night); border-bottom: 1px solid var(--night2); }
.instrument .wrap { padding-top: var(--s5); padding-bottom: var(--s5); }
.instrument h2, .instrument h3 { color: var(--on-night); }
.instrument .sub, .instrument .sc-ax { color: var(--on-night-faint); }
.instrument a { color: var(--focus); }

.field { display: block; margin: 0 0 var(--s3); }
.field > .lab { display: block; font-weight: 700; margin-bottom: var(--s1); }
.field > .hint { display: block; color: var(--on-night-faint); font-size: 0.88rem; margin-bottom: var(--s2); }
textarea#ms {
  width: 100%; min-height: 9.5em; resize: vertical;
  background: var(--night2); color: var(--on-night);
  border: 1px solid var(--rule-night); padding: var(--s3);
  font-family: 'Sumi Mincho MS', 'Sumi Mincho', serif;
  font-size: 1rem; line-height: 1.95;
}
textarea#ms::placeholder { color: var(--on-night-faint); }

.knobs { display: flex; flex-wrap: wrap; gap: var(--s4); margin: var(--s3) 0; }
.knob { flex: 1 1 13rem; min-width: 0; }
.knob label { display: block; font-size: 0.88rem; margin-bottom: var(--s1); }
.knob input[type=range] { width: 100%; accent-color: var(--focus); }
.knob output { font-weight: 700; }

.acts { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s3) 0 0; }
button {
  font: inherit; font-size: 0.94rem; cursor: pointer;
  background: var(--night2); color: var(--on-night);
  border: 1px solid var(--rule-night); padding: var(--s2) var(--s3);
}
button:hover { background: var(--night); border-color: var(--focus); }
button[disabled] { opacity: 0.45; cursor: default; }
.paper-scope button { background: var(--paper2); color: var(--ink); border-color: var(--rule); }
.paper-scope button:hover { background: var(--paper); border-color: var(--shu-p); }

/* 図は幅が狭いと読めなくなるので、縮めるのでなく横に送れる形にする */
.plate { margin: var(--s4) 0 0; overflow-x: auto; scrollbar-width: thin; }
svg.score, svg.chord { display: block; width: 100%; height: auto; }
svg.score { min-width: 30rem; }
svg.chord { min-width: 26rem; }
.sc-ax { font-size: 11px; fill: var(--faint); font-family: 'Sumi Mincho', serif; }
.instrument .sc-ax { fill: var(--on-night-faint); }
.sc-lab { font-size: 12px; fill: var(--ink2); font-family: 'Sumi Mincho', serif; }
.instrument .sc-lab { fill: var(--on-night); }

.figs { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); margin: var(--s4) 0 0; padding: 0; }
.fig { min-width: 6.5rem; }
.fig dt { font-size: 0.8rem; color: var(--faint); }
.instrument .fig dt { color: var(--on-night-faint); }
.fig dd { margin: 0; }
.fig dd b { font-size: 1.5rem; font-weight: 700; }
.fig dd span { font-size: 0.78rem; margin-inline-start: 2px; color: var(--faint); }
.instrument .fig dd span { color: var(--on-night-faint); }

.legend { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); margin: var(--s3) 0 0; padding: 0; list-style: none; font-size: 0.84rem; }
.legend li { display: flex; align-items: center; gap: 6px; }
.legend i { width: 14px; height: 10px; display: inline-block; }

.cols { display: flex; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s4); }
.pane { flex: 1 1 17rem; min-width: 0; }
.pane h3 { margin-top: 0; margin-bottom: var(--s2); }
.hits { margin: 0; padding-inline-start: 1.2em; }
.hits li { margin-bottom: var(--s2); }
.hits .num { display: inline-block; min-width: 3.4em; color: var(--shu-p); font-weight: 700; }
.instrument .hits .num { color: var(--focus); }
.none { color: var(--faint); }
.instrument .none { color: var(--on-night-faint); }

.scroller { overflow-x: auto; margin-top: var(--s4); scrollbar-width: thin; }
.swipe { display: none; font-size: 0.82rem; color: var(--faint); margin: var(--s2) 0 0; }
.instrument .swipe { color: var(--on-night-faint); }
@media (max-width: 46rem) { .swipe { display: block; } }
table.grid { border-collapse: collapse; width: 100%; font-size: 0.86rem; min-width: 34rem; }
table.grid caption { text-align: start; color: var(--faint); padding-bottom: var(--s2); }
.instrument table.grid caption { color: var(--on-night-faint); }
table.grid th, table.grid td { border-bottom: 1px solid var(--rule); padding: 6px 8px; text-align: start; vertical-align: top; }
.instrument table.grid th, .instrument table.grid td { border-color: var(--rule-night); }
table.grid th { font-weight: 700; white-space: nowrap; }
table.grid td.tx { font-family: 'Sumi Mincho MS', serif; }
table.grid tr.hot td:first-child { border-inline-start: 3px solid var(--shu); }

.proof { border: 1px solid var(--rule-night); padding: var(--s3); margin-top: var(--s4); }
.instrument .proof b { color: var(--focus); }
.proof .row { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin: 0; padding: 0; list-style: none; }
.proof .row li { font-size: 0.9rem; }

.linkbox { margin-top: var(--s3); }
.linkbox input {
  width: 100%; font: inherit; font-size: 0.82rem; padding: var(--s2);
  background: var(--night2); color: var(--on-night); border: 1px solid var(--rule-night);
  overflow-x: auto; white-space: nowrap;
}

.cuts { margin-top: var(--s3); }
.cuts ol { margin: var(--s2) 0 0; padding-inline-start: 1.2em; }
.cuts li { margin-bottom: var(--s2); font-size: 0.9rem; }
.cuts .t { color: var(--on-night-faint); margin-inline-end: var(--s2); }

.note { border-inline-start: 3px solid var(--shu); padding-inline-start: var(--s3); color: var(--ink2); }
.instrument .note { border-color: var(--focus); color: var(--on-night); }

.mono { font-variant-numeric: tabular-nums; }
.nojs { display: none; }
html.nojs-on .nojs { display: block; }
html.nojs-on .jsonly { display: none; }

footer.foot { padding: var(--s5) 0 var(--s6); color: var(--faint); font-size: 0.86rem; }
footer.foot .who { letter-spacing: 0.22em; }

@media (max-width: 30rem) {
  .crest { padding: 6px var(--s3); gap: var(--s2); }
  .crest .seal { width: 20px; height: 20px; }
  .crest .mark { font-size: 0.98rem; letter-spacing: 0.1em; }
  .crest .romaji { font-size: 0.58rem; letter-spacing: 0.2em; }
  .figs { gap: var(--s3); }
  .fig { min-width: 5.4rem; }
  .fig dd b { font-size: 1.24rem; }
}
/* 広い画面では右半分が空くので、題と前文を二列に割り、図と表を広げる */
@media (min-width: 82rem) {
  .wrap { max-width: 72rem; }
  .hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s3) var(--s7); align-items: start; }
  .hero h1 { grid-column: 1; }
  .hero .lead { grid-column: 2; margin-top: 0; }
  .hero .tag { grid-column: 2; }
}
@media (prefers-reduced-motion: no-preference) {
  .plate svg { transition: opacity 160ms linear; }
}