/* ============================================================
   CCAGI 工房案内図 — atelier plate catalog
   tokens は DESIGN.md と1対1
   ============================================================ */

:root {
  --paper: #F6F1E7;
  --paper-2: #EFE7D6;
  --paper-deep: #E6DCC6;
  --ink: #211D17;
  --ink-2: #5C5442;
  --hairline: #D8CDB6;
  --stamp: #A93A20;

  --room-map: #1F6B5A;
  --room-think: #C45C26;
  --room-look: #8B3D5A;
  --room-make: #2C4A7C;
  --room-check: #6B5A1F;
  --room-guard: #8B1E1E;
  --room-ship: #3D6B2C;
  --room-keep: #5A4A7C;

  --st-installed: #3D6B2C;
  --st-module: #C45C26;
  --st-via: #1F6B5A;
  --st-absent: #A93A20;

  --font-display: "Hiragino Mincho ProN", "YuMincho", "Yu Mincho", "Noto Serif JP", serif;
  --font-ui: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --maxw: 1120px;
  --dur: 180ms;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
}

code, pre { font-family: var(--font-mono); }

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

button { font: inherit; color: inherit; cursor: pointer; }

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

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- top bar ---------- */

.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: baseline; gap: 24px; flex-wrap: wrap;
  padding: 10px 24px;
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
}

.topbar-brand { display: flex; align-items: baseline; gap: 10px; }
.brand-mincho { font-family: var(--font-display); font-weight: 600; font-size: 17px; letter-spacing: 0.08em; }
.brand-sub { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); }

.topbar-nav { display: flex; gap: 2px; flex-wrap: wrap; margin-left: auto; }
.topbar-nav a {
  text-decoration: none; font-size: 13px; padding: 2px 10px;
  border-bottom: 2px solid transparent;
}
.topbar-nav a:hover { border-bottom-color: var(--stamp); }

/* ---------- plate heads (図版番号) ---------- */

main { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

.section { margin-top: 96px; }

.plate-head {
  display: flex; align-items: baseline; gap: 16px;
  margin-bottom: 20px;
}
.plate-no {
  font-family: var(--font-display);
  font-size: 13px; letter-spacing: 0.25em;
  color: var(--stamp);
  border: 1px solid var(--stamp);
  padding: 1px 10px 1px 12px;
  white-space: nowrap;
}
.plate-title {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 600; letter-spacing: 0.06em;
  line-height: 1.3;
}
.plate-rule { flex: 1; height: 1px; background: var(--hairline); align-self: center; }

.section-lede { max-width: 640px; color: var(--ink-2); margin-bottom: 32px; }

/* ---------- hero ---------- */

.hero { padding-top: 40px; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(320px, 5fr) minmax(360px, 6fr);
  gap: 48px;
  align-items: start;
}

.hero-kicker {
  font-size: 14px; font-weight: 600;
  color: var(--room-ship);
  border-left: 3px solid var(--room-ship);
  padding-left: 10px;
  margin-bottom: 20px;
}
.hero-kicker code {
  background: var(--paper-2); padding: 0 6px; border: 1px solid var(--hairline);
  font-size: 13px;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 600; line-height: 1.25; letter-spacing: 0.04em;
  margin-bottom: 16px;
}

.hero-lede { max-width: 420px; color: var(--ink-2); margin-bottom: 28px; }

.hero-counts {
  display: flex; gap: 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 28px;
}
.hero-counts .count {
  flex: 1; padding: 12px 16px 10px 0;
}
.hero-counts .count + .count { border-left: 1px solid var(--hairline); padding-left: 16px; }
.hero-counts dt { font-size: 11px; letter-spacing: 0.12em; color: var(--ink-2); }
.hero-counts dd {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 44px); font-weight: 600; line-height: 1.15;
}

.hero-cta-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.cta {
  display: inline-block; text-decoration: none;
  background: var(--ink); color: var(--paper);
  font-weight: 600; font-size: 15px;
  padding: 12px 28px; border-radius: 2px;
}
.cta:hover { background: var(--stamp); }
.cta-quiet {
  font-size: 14px; text-decoration: none;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 1px;
}
.cta-quiet:hover { color: var(--stamp); border-bottom-color: var(--stamp); }

/* ---------- floor plan ---------- */

.plan-caption {
  font-size: 12px; color: var(--ink-2); letter-spacing: 0.06em;
  margin-bottom: 8px;
}

.floor-plan {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, minmax(76px, auto));
  grid-template-areas:
    "map   map   think think"
    "make  make  look  look"
    "make  make  look  look"
    "guard check ship  keep";
  border: 2px solid var(--ink);
  background: var(--ink);
  gap: 1px;
}

.room {
  border: none;
  background: var(--paper);
  text-align: left;
  padding: 10px 12px;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 6px;
  transition: background var(--dur) ease, color var(--dur) ease;
  min-height: 96px;
}
.room[data-room="map"]   { grid-area: map; }
.room[data-room="think"] { grid-area: think; }
.room[data-room="look"]  { grid-area: look; }
.room[data-room="make"]  { grid-area: make; }
.room[data-room="check"] { grid-area: check; }
.room[data-room="guard"] { grid-area: guard; }
.room[data-room="ship"]  { grid-area: ship; }
.room[data-room="keep"]  { grid-area: keep; }

.room-top { display: flex; align-items: center; gap: 8px; }
.pigment {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--rc); flex: none;
  border: 1px solid rgba(0,0,0,0.25);
}
.room-en {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-2);
}
.room-ja {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 600; line-height: 1.35;
}
.room-count { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); }

.room:hover { background: var(--paper-2); }

.room.is-active {
  background: var(--rc);
  color: #FFFFFF;
}
.room.is-active .room-en,
.room.is-active .room-count { color: rgba(255,255,255,0.85); }
.room.is-active .pigment { background: #FFFFFF; border-color: rgba(255,255,255,0.6); }

/* ---------- 図版02 口の出し方 ---------- */

.talk-table { border-top: 1px solid var(--ink); }

.talk-row {
  display: grid;
  grid-template-columns: minmax(180px, 5fr) 40px minmax(180px, 5fr) 120px;
  align-items: center; gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline);
}
.talk-say {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 600; letter-spacing: 0.03em;
}
.talk-arrow {
  text-align: center; color: var(--stamp); font-size: 18px;
  font-family: var(--font-display);
}
.talk-gets { font-family: var(--font-mono); font-size: 13px; }
.talk-room { justify-self: end; }

.room-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--ink-2); white-space: nowrap;
}
.room-tag .pigment { width: 10px; height: 10px; }

/* ---------- 図版03 工程の帯 ---------- */

.phase-band {
  display: flex;
  overflow-x: auto;
  border: 1px solid var(--ink);
  background: var(--paper-deep);
  -webkit-overflow-scrolling: touch;
}
.phase {
  flex: 0 0 152px;
  padding: 16px 14px 14px;
  border-right: 1px solid var(--hairline);
  background: var(--paper-2);
}
.phase:last-child { border-right: none; }
.phase-n {
  font-family: var(--font-display);
  font-size: 34px; font-weight: 600; line-height: 1;
  color: var(--stamp);
  display: block; margin-bottom: 8px;
}
.phase-ja { font-weight: 600; font-size: 15px; display: block; }
.phase-cmd {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-2);
  display: block; margin-top: 6px; word-break: break-all;
}

/* ---------- 図版04 MCPと道具 ---------- */

.status-legend {
  display: flex; gap: 20px; flex-wrap: wrap;
  font-size: 12px; color: var(--ink-2);
  margin-bottom: 16px;
}
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.status-dot {
  width: 10px; height: 10px; border-radius: 50%; flex: none;
  border: 1px solid rgba(0,0,0,0.2);
}

.mcp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}
.mcp-card { background: var(--paper-2); padding: 16px; }
.mcp-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.mcp-ja { font-weight: 600; font-size: 15px; }
.mcp-id { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); margin-left: auto; }
.mcp-plain { font-size: 13.5px; color: var(--ink-2); }
.mcp-note {
  margin-top: 8px; font-size: 12.5px;
  border-left: 3px solid var(--stamp);
  padding-left: 8px; color: var(--ink);
}

.tools-sub {
  font-family: var(--font-display); font-size: 18px; font-weight: 600;
  margin: 40px 0 12px; letter-spacing: 0.04em;
}
.binary-list { list-style: none; border-top: 1px solid var(--ink); }
.binary-list li {
  display: grid;
  grid-template-columns: 200px 140px 1fr;
  gap: 16px; align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
}
.binary-id { font-family: var(--font-mono); font-size: 13px; }
.binary-ja { font-weight: 600; font-size: 14px; }
.binary-plain { font-size: 13.5px; color: var(--ink-2); }

/* ---------- 図版05 カタログ ---------- */

.catalog-controls {
  position: sticky; top: 47px; z-index: 30;
  background: var(--paper);
  padding: 12px 0 10px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 24px;
}

.kind-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--hairline); margin-bottom: 12px; }
.kind-tab {
  border: none; background: none;
  padding: 8px 18px 9px;
  font-size: 14px; font-weight: 600;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  color: var(--ink-2);
}
.kind-tab:hover { color: var(--ink); }
.kind-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.kind-tab .tab-n { font-family: var(--font-mono); font-size: 11px; margin-left: 5px; color: var(--ink-2); }

.control-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }

.room-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.room-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--hairline);
  background: var(--paper-2);
  border-radius: 2px;
  font-size: 12.5px;
  padding: 4px 10px;
  transition: background var(--dur) ease, color var(--dur) ease;
}
.room-chip .pigment { width: 10px; height: 10px; }
.room-chip:hover { border-color: var(--ink-2); }
.room-chip.is-active {
  background: var(--rc, var(--ink)); color: #FFFFFF; border-color: var(--rc, var(--ink));
  font-weight: 600;
}
.room-chip.is-active .pigment { background: #FFFFFF; border-color: rgba(255,255,255,0.6); }

.search-wrap { margin-left: auto; flex: 1 1 200px; max-width: 320px; }
#catalog-search {
  width: 100%;
  font: inherit; font-size: 14px;
  padding: 7px 12px;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  background: #FFFFFF;
  color: var(--ink);
}
#catalog-search:focus-visible { outline: 2px solid var(--stamp); outline-offset: 1px; }

.result-count { font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); margin-top: 8px; }

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}

.card {
  display: flex; flex-direction: column; gap: 8px;
  text-align: left;
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--rc, var(--ink-2));
  border-radius: 2px;
  padding: 14px 16px;
}
.card:hover { border-color: var(--ink-2); border-left-color: var(--rc); background: #F2EBDC; }
.card[hidden] { display: none; }

.card-meta { display: flex; align-items: center; gap: 8px; }
.kind-badge {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em;
  padding: 1px 8px;
  border: 1px solid var(--ink-2);
  color: var(--ink-2);
  border-radius: 2px;
  white-space: nowrap;
}
.card-room-name { font-size: 11px; color: var(--rc, var(--ink-2)); font-weight: 600; margin-left: auto; white-space: nowrap; }

.card-desc {
  font-size: 13.5px; line-height: 1.7;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-id {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-2);
  margin-top: auto;
  word-break: break-all;
}

/* ---------- 図版05 分布 ---------- */

.dist-caption {
  font-size: 12px; letter-spacing: 0.08em; color: var(--ink-2);
  margin: 28px 0 10px;
}
.dist-caption-kinds { margin-top: 40px; }

.dist-stack {
  display: flex;
  height: 64px;
  border: 1px solid var(--ink);
  background: var(--paper-2);
  overflow: hidden;
}
.dist-seg {
  background: var(--rc);
  position: relative;
  min-width: 2px;
  display: flex; align-items: center; justify-content: center;
}
.dist-seg + .dist-seg { border-left: 1px solid var(--paper); }
.dist-seg-label {
  color: #FDFBF5;
  font-size: 11px; line-height: 1.5; text-align: center;
  font-weight: 600;
  padding: 0 4px;
  white-space: nowrap;
}

.dist-rows { margin-top: 18px; border-top: 1px solid var(--hairline); }
.dist-row {
  display: grid;
  grid-template-columns: 14px minmax(120px, 160px) 56px 62px 1fr minmax(160px, 220px);
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
}
.dist-room-ja { font-size: 14px; font-weight: 600; }
.dist-count { font-family: var(--font-mono); font-size: 13px; text-align: right; }
.dist-pct { font-family: var(--font-mono); font-size: 13px; color: var(--ink-2); text-align: right; }
.dist-mini {
  display: flex; height: 10px;
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  overflow: hidden;
}
.mini-seg { display: block; height: 100%; }
.dist-kind-text { font-size: 11.5px; color: var(--ink-2); }

.dist-kinds {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.dist-kind-card {
  border: 1px solid var(--hairline);
  background: var(--paper-2);
  padding: 16px 18px;
}
.dist-kind-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.dist-kind-n { font-family: var(--font-display); font-size: 26px; font-weight: 600; }
.dist-kind-pct { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-2); }
.dist-kind-bar {
  height: 8px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  margin-bottom: 10px;
  overflow: hidden;
}
.dist-kind-bar span { display: block; height: 100%; background: var(--kc); }
.dist-kind-plain { font-size: 12.5px; line-height: 1.8; color: var(--ink-2); }

.dist-note {
  margin-top: 24px;
  font-size: 14px; line-height: 2;
  border-left: 3px solid var(--ink);
  padding-left: 14px;
}

@media (max-width: 760px) {
  .dist-stack { height: 48px; }
  .dist-seg-label { display: none; }
  .dist-row {
    grid-template-columns: 14px 1fr 52px 58px;
    row-gap: 6px;
  }
  .dist-mini { grid-column: 2 / -1; }
  .dist-kind-text { grid-column: 2 / -1; }
  .dist-kinds { grid-template-columns: 1fr; }
}

/* ---------- dialog ---------- */

.detail-dialog {
  border: 1px solid var(--ink);
  border-radius: 2px;
  padding: 0;
  margin: auto;
  max-width: 640px; width: calc(100vw - 48px);
  max-height: calc(100vh - 64px);
  overflow: auto;
  background: var(--paper);
  color: var(--ink);
}
.detail-dialog::backdrop { background: rgba(33, 29, 23, 0.45); }

.dialog-band { height: 8px; background: var(--rc, var(--ink)); }
.dialog-body { padding: 24px 28px 28px; }
.dialog-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.dialog-room { font-size: 12.5px; font-weight: 600; color: var(--rc, var(--ink-2)); }
.dialog-id {
  font-family: var(--font-mono);
  font-size: 20px; font-weight: 600;
  margin-bottom: 12px; word-break: break-all;
}
.dialog-desc { font-size: 14.5px; line-height: 1.9; margin-bottom: 20px; white-space: pre-wrap; }
.dialog-invoke {
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  padding: 12px 14px;
  margin-bottom: 20px;
}
.invoke-label { font-size: 11px; letter-spacing: 0.1em; color: var(--ink-2); margin-bottom: 4px; }
.invoke-code { font-size: 13px; word-break: break-all; }
.dialog-close-row { text-align: right; }

.btn {
  background: var(--ink); color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 2px;
  font-size: 13.5px; font-weight: 600;
  padding: 8px 20px;
}
.btn:hover { background: var(--stamp); border-color: var(--stamp); }
.btn-quiet { background: none; color: var(--ink); }
.btn-quiet:hover { background: var(--paper-deep); color: var(--ink); border-color: var(--ink); }

/* ---------- 図版06 混ぜ台 ---------- */

.section-mixer {
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  padding: 32px 32px 40px;
  margin-left: -32px; margin-right: -32px;
}

.mixer-step-title {
  font-family: var(--font-display);
  font-size: 19px; font-weight: 600;
  margin: 36px 0 16px;
  display: flex; align-items: center; gap: 10px;
}
.mixer-step-title:first-child { margin-top: 0; }
.step-num {
  font-size: 14px; color: var(--paper);
  background: var(--ink);
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
}

.job-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.job-btn {
  text-align: left;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 2px;
  padding: 14px 16px;
  transition: border-color var(--dur) ease;
}
.job-btn:hover { border-color: var(--ink); }
.job-btn.is-active { border: 2px solid var(--ink); padding: 13px 15px; background: #FFFFFF; }
.job-ja { font-family: var(--font-display); font-size: 16px; font-weight: 600; display: block; }
.job-id { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-2); }

.option-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.option-card {
  text-align: left;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 2px;
  padding: 18px;
  display: flex; flex-direction: column; gap: 12px;
}
.option-card:hover { border-color: var(--ink); }
.option-card.is-active { border: 2px solid var(--stamp); padding: 17px; }
.option-name { font-family: var(--font-display); font-size: 17px; font-weight: 600; }
.option-use { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.option-use li { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; }
.option-use .kind-badge { font-size: 9.5px; }
.option-use code { font-size: 12px; word-break: break-all; }

.tradeoff { border-top: 1px solid var(--hairline); padding-top: 10px; font-size: 12.5px; }
.tradeoff dt { font-weight: 600; }
.tradeoff .gain dt { color: var(--room-ship); }
.tradeoff .cost dt { color: var(--stamp); }
.tradeoff dd { color: var(--ink-2); margin-bottom: 6px; }

.option-pick {
  margin-top: auto;
  font-size: 12px; font-weight: 600;
  color: var(--ink-2);
  text-align: right;
}
.option-card.is-active .option-pick { color: var(--stamp); }

/* recipe */

.recipe {
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 20px 24px;
  margin-bottom: 16px;
}
.recipe-goal { font-family: var(--font-display); font-size: 18px; font-weight: 600; margin-bottom: 12px; }
.recipe-say { border-left: 3px solid var(--room-make); padding-left: 12px; margin-bottom: 14px; }
.recipe-say p { font-family: var(--font-display); font-size: 15px; }
.recipe-say-label, .recipe-avoid-label {
  font-size: 11px; letter-spacing: 0.1em; color: var(--ink-2); display: block; margin-bottom: 4px;
}
.recipe-avoid { border-left: 3px solid var(--stamp); padding-left: 12px; }
.recipe-avoid li { font-size: 13px; list-style: none; }

.recipe-json {
  background: var(--ink);
  color: #EFE7D6;
  font-size: 12px; line-height: 1.7;
  padding: 18px 20px;
  overflow-x: auto;
  border-radius: 2px;
  white-space: pre;
}
.recipe-actions { display: flex; gap: 10px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.copy-status { font-size: 12.5px; color: var(--room-ship); font-weight: 600; }

/* ---------- 図版07 注意 ---------- */

.caveat-band {
  border: 1px solid var(--stamp);
  border-left: 6px solid var(--stamp);
  background: var(--paper-2);
  padding: 20px 24px;
}
.caveat-head {
  font-family: var(--font-display);
  font-weight: 600; font-size: 17px;
  color: var(--stamp);
  margin-bottom: 10px;
}
.caveat-list { list-style: none; }
.caveat-list li {
  padding: 8px 0 8px 18px;
  position: relative;
  border-bottom: 1px solid var(--hairline);
  font-size: 14px;
}
.caveat-list li:last-child { border-bottom: none; }
.caveat-list li::before {
  content: "※"; position: absolute; left: 0; color: var(--stamp);
}

/* ---------- footer ---------- */

.footer {
  margin-top: 96px;
  background: var(--paper-deep);
  border-top: 1px solid var(--ink);
}
.footer-inner { max-width: var(--maxw); margin: 0 auto; padding: 32px 24px 48px; }
.footer-main { font-family: var(--font-mono); font-size: 13px; margin-bottom: 8px; }
.footer-note { font-size: 13.5px; color: var(--ink-2); }
.footer-note strong { color: var(--ink); }

/* ---------- responsive ---------- */

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero { padding-top: 24px; }
  .hero-title { font-size: clamp(30px, 8vw, 40px); }
  .hero-lede { display: none; }
  .hero-counts dd { font-size: 26px; }
  .hero-counts .count { padding-right: 8px; }
  .hero-counts .count + .count { padding-left: 8px; }

  /* 平面図 → 縦の顔料リスト */
  .floor-plan {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-template-areas: none;
  }
  .room, .room[data-room] { grid-area: auto; min-height: 0; flex-direction: row; align-items: center; }
  .room .room-top { flex: 1; }
  .room-ja { font-size: 15px; }

  .talk-row {
    grid-template-columns: 1fr;
    gap: 2px;
    padding: 12px 0;
  }
  .talk-arrow { display: none; }
  .talk-room { justify-self: start; }

  .binary-list li { grid-template-columns: 1fr; gap: 0; }

  .section-mixer { margin-left: -24px; margin-right: -24px; padding: 24px 20px 32px; }

  .catalog-controls { top: 0; position: static; }
}

@media (max-width: 480px) {
  .topbar { padding: 8px 16px; gap: 8px; }
  .topbar-nav a { padding: 2px 6px; font-size: 12px; }
  main { padding: 0 16px; }
  .section-mixer { margin-left: -16px; margin-right: -16px; }
  .hero-counts { flex-wrap: wrap; }
  .hero-counts .count { flex: 1 1 40%; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0ms !important; animation: none !important; }
}