/* 制作の書斎 — Phase 0
   設計方針: 暗い机（資料・根拠の側）と生成りの紙（本人の制作の側）を素材で分ける。
   書斎らしさは木目や革の模倣ではなく、背表紙の縦書きと明朝の問いで作る。 */

:root {
  --desk: #191512;
  --desk-2: #201b16;
  --desk-3: #282119;
  --line-dark: #382f25;
  --paper: #efe7d6;
  --paper-2: #e7dcc5;
  --paper-line: #d8c9ab;
  --ink: #2b2620;
  --ink-soft: #6a604e;
  --milk: rgba(240, 231, 214, 0.85);
  --milk-dim: rgba(240, 231, 214, 0.55);
  --rust: #a84b26;
  /* 8.5〜9.5px の小見出し用。--rust のままだと机の色の上で 2.80〜3.44 しかなく読みにくい。
     色相はそのままに明るくして 4.5:1 を満たす。塗り・線・大きい字は --rust のまま使う。 */
  --rust-ink: #df6433;
  --rust-deep: #8f3e1e;
  --brass: #9c823f;
  --moss: #77865f;
  --slate: #8b98a1;
  --serif: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP", serif;
  --sans: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
}

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

[hidden] { display: none !important; }

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

body {
  background: var(--desk);
  color: var(--milk);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.75;
  min-height: 100vh;
}

/* 机の面: ごく弱い光の減衰のみ。発光・グラデ装飾はしない */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 120% 90% at 50% 0%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.35) 100%);
  z-index: 0;
}

#app { position: relative; z-index: 1; }

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

button {
  font-family: var(--sans);
  font-size: 14px;
  cursor: pointer;
  background: none;
  border: none;
  color: inherit;
  min-height: 44px;
}

textarea, input[type="text"] {
  font-family: var(--sans);
  font-size: 15px;
}

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

/* ============ 背表紙 ============ */

.spine {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: 44px;
  border-right: 1px solid var(--line-dark);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 28px;
  writing-mode: vertical-rl;
  font-family: var(--serif);
  letter-spacing: 0.45em;
  font-size: 13px;
  color: var(--milk-dim);
  user-select: none;
  z-index: 2;
}

.spine small {
  font-size: 10px;
  letter-spacing: 0.3em;
  color: rgba(240,231,214,0.3);
  margin-top: 1.2em;
}

/* ============ ヘッダーナビ ============ */

.topnav {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  background: rgba(25, 21, 18, 0.97);
  border-bottom: 1px solid var(--line-dark);
  padding: 0 20px 0 64px;
}

.topnav nav {
  display: flex;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.topnav nav::-webkit-scrollbar { display: none; }

.topnav a {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  /* 「名簿」のように短い項目は幅43pxで的が細かった。長い項目は元から超えるので影響しない */
  min-width: 44px;
  padding: 0 16px;
  color: var(--milk-dim);
  text-decoration: none;
  font-size: 13.5px;
  letter-spacing: 0.16em;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}

.topnav a:hover { color: var(--milk); }

.topnav a[aria-current="page"] {
  color: var(--milk);
  border-bottom-color: var(--rust);
}

.topnav-note {
  margin-left: auto;
  font-size: 10.5px;
  color: rgba(240, 231, 214, 0.35);
}

/* ============ 制作会社レーダー ============ */

#view-companies { padding-left: 44px; }

.company-radar {
  max-width: 1460px;
  margin: 0 auto;
  padding: 30px 34px 48px;
}

.company-radar-head {
  max-width: 880px;
  padding: 2px 0 22px;
  border-bottom: 1px solid var(--line-dark);
}

.company-radar-kicker {
  color: var(--rust);
  font-size: 9px;
  letter-spacing: 0.24em;
  margin-bottom: 8px;
}

.company-radar-head h1 {
  color: var(--milk);
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(26px, 3vw, 38px);
  letter-spacing: 0.09em;
  line-height: 1.35;
}

.company-radar-head > p:not(.company-radar-kicker) {
  color: var(--milk-dim);
  max-width: 720px;
  font-size: 13px;
  line-height: 1.9;
  margin-top: 10px;
}

.company-radar-head .company-radar-boundary {
  color: rgba(240, 231, 214, 0.42);
  font-size: 10.5px;
  padding-left: 11px;
  border-left: 2px solid var(--brass);
}

.company-radar-layout {
  display: grid;
  grid-template-columns: minmax(290px, 360px) minmax(0, 1fr);
  gap: 34px;
  align-items: start;
  margin-top: 24px;
}

.company-radar-list-pane {
  position: sticky;
  top: 72px;
  max-height: calc(100vh - 96px);
  overflow: auto;
  padding-right: 10px;
}

.company-radar-controls {
  padding: 0 0 14px;
  border-bottom: 1px solid var(--line-dark);
}

.company-radar-types {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line-dark);
  border-left: 1px solid var(--line-dark);
  margin-bottom: 15px;
}

.company-radar-type {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  border-right: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  color: var(--milk-dim);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-align: left;
  padding: 8px 10px;
  line-height: 1.45;
}

.company-radar-type:hover,
.company-radar-type[aria-pressed="true"] {
  color: var(--milk);
  background: var(--desk-2);
  box-shadow: inset 3px 0 0 var(--rust);
}

.company-radar-type .company-radar-type-count {
  color: var(--brass);
  font-size: 9px;
  white-space: nowrap;
}

.company-radar-search-label {
  display: block;
  color: var(--milk-dim);
  font-size: 10px;
  letter-spacing: 0.15em;
  margin-bottom: 4px;
}

#company-radar-search {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line-dark);
  background: var(--desk-2);
  color: var(--milk);
  font-family: var(--sans);
  font-size: 12px;
  padding: 8px 10px;
}

#company-radar-search::placeholder { color: rgba(240, 231, 214, 0.34); }

.company-radar-count {
  color: var(--milk-dim);
  font-size: 10px;
  letter-spacing: 0.08em;
  margin-top: 8px;
}

.company-radar-list { padding-top: 5px; }

.company-radar-row {
  position: relative;
  width: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  gap: 7px;
  padding: 13px 8px 13px 0;
  border-bottom: 1px solid var(--line-dark);
  color: var(--milk);
  text-align: left;
}

.company-radar-row:hover,
.company-radar-row.selected { background: var(--desk-2); }
.company-radar-row.selected { box-shadow: inset 3px 0 0 var(--rust); padding-left: 8px; }

.company-radar-row-index {
  color: var(--rust);
  font-size: 9px;
  letter-spacing: 0.12em;
  padding-top: 2px;
}

.company-radar-row-name {
  display: block;
  color: var(--milk);
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: 0.03em;
  line-height: 1.4;
}

.company-radar-row-meta {
  display: block;
  color: var(--milk-dim);
  font-size: 9.5px;
  line-height: 1.5;
  margin-top: 3px;
}

.company-radar-detail {
  min-width: 0;
  max-width: 850px;
  overflow-wrap: anywhere;
}

.company-dossier {
  border-top: 3px solid var(--rust);
  background: var(--desk-2);
}

.company-dossier-head {
  padding: 24px 26px 20px;
  border-bottom: 1px solid var(--line-dark);
}

.company-dossier-kicker {
  color: var(--rust);
  font-size: 9px;
  letter-spacing: 0.22em;
  margin-bottom: 7px;
}

.company-dossier-head h2 {
  color: var(--milk);
  font-family: var(--serif);
  font-size: clamp(23px, 3vw, 33px);
  font-weight: 500;
  letter-spacing: 0.07em;
  line-height: 1.35;
}

.company-dossier-meta {
  color: var(--milk-dim);
  font-size: 11px;
  letter-spacing: 0.05em;
  margin-top: 8px;
}

.company-dossier-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(210px, 0.75fr);
  gap: 1px;
  background: var(--line-dark);
}

.company-dossier-grid > section {
  background: var(--desk-2);
  padding: 19px 22px 21px;
}

.company-dossier-grid > section.company-dossier-wide { grid-column: 1 / -1; }

.company-dossier h3 {
  color: var(--brass);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  margin-bottom: 8px;
}

.company-dossier p {
  color: rgba(240, 231, 214, 0.82);
  font-size: 12.5px;
  line-height: 1.85;
}

.company-domain-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
}

.company-domain-list li {
  color: var(--milk-dim);
  border: 1px solid var(--line-dark);
  font-size: 10px;
  line-height: 1.35;
  padding: 5px 7px;
}

.company-dossier-link {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  color: var(--brass);
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.55;
  text-decoration: none;
  border-bottom: 1px solid rgba(156,130,63,0.48);
}

.company-dossier-link:hover { color: var(--milk); border-bottom-color: var(--milk); }

.company-dossier-link small {
  color: var(--milk-dim);
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.05em;
}

.company-dossier-work-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.company-dossier-work {
  display: block;
  border: 1px solid var(--line-dark);
  color: var(--milk);
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.45;
  padding: 10px 12px;
  text-decoration: none;
}

.company-dossier-work:hover {
  background: rgba(240, 231, 214, 0.06);
  border-color: var(--brass);
}

.company-dossier-work small {
  color: var(--brass);
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.company-dossier-muted {
  color: var(--milk-dim);
  font-size: 11px;
  line-height: 1.75;
  margin: 0;
}

.company-dossier-status {
  color: var(--moss) !important;
  font-size: 10.5px !important;
}

/* ============ 舞台技術（装置の内部を読む棚） ============ */

#view-apparatus { padding-left: 44px; }

.apparatus-library {
  max-width: 1500px;
  margin: 0 auto;
  padding: 28px 30px 54px;
}

.apparatus-head {
  max-width: 960px;
  padding: 0 0 22px;
  border-bottom: 1px solid var(--line-dark);
}

.apparatus-kicker {
  color: var(--rust);
  font-size: 9px;
  letter-spacing: 0.26em;
  margin-bottom: 7px;
}

.apparatus-head h1 {
  color: var(--milk);
  font-family: var(--serif);
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.35;
}

.apparatus-head > p:not(.apparatus-kicker) {
  color: var(--milk-dim);
  font-size: 12px;
  line-height: 1.8;
  margin-top: 7px;
}

.apparatus-head .apparatus-boundary {
  display: inline-block;
  color: rgba(240,231,214,0.48);
  border-left: 2px solid var(--brass);
  padding-left: 10px;
}

.apparatus-layout {
  display: grid;
  grid-template-columns: 370px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  margin-top: 22px;
}

.apparatus-index {
  position: sticky;
  top: 70px;
  height: calc(100vh - 92px);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.apparatus-controls {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-dark);
}

.apparatus-controls label {
  display: block;
  color: var(--milk-dim);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  margin-bottom: 6px;
}

.apparatus-controls input,
.apparatus-controls select {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line-dark);
  border-radius: 0;
  background: var(--desk-2);
  color: var(--milk);
  font-family: var(--sans);
  font-size: 13px;
  padding: 9px 11px;
}

.apparatus-controls input::placeholder { color: rgba(240,231,214,0.3); }
.apparatus-controls input:focus,
.apparatus-controls select:focus { outline: none; border-color: var(--brass); }

.apparatus-selects {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 7px;
}

.apparatus-count {
  color: var(--milk-dim);
  font-size: 10px;
  letter-spacing: 0.05em;
  margin-top: 8px;
}

.apparatus-list {
  flex: 1 1 auto;
  min-height: 80px;
  overflow-y: auto;
  border: 1px solid var(--line-dark);
  border-top: 0;
  background: rgba(0,0,0,0.12);
  scrollbar-color: var(--line-dark) transparent;
}

.apparatus-row {
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr);
  width: 100%;
  min-height: 84px;
  padding: 12px 12px 11px 10px;
  border-bottom: 1px solid var(--line-dark);
  border-left: 3px solid transparent;
  text-align: left;
}

.apparatus-row:hover { background: var(--desk-2); }
.apparatus-row.selected { background: var(--desk-2); border-left-color: var(--rust); }

.apparatus-row-index {
  color: var(--rust);
  font-family: var(--serif);
  font-size: 11px;
  letter-spacing: 0.1em;
  padding-top: 2px;
}

.apparatus-row-copy { display: block; min-width: 0; }
.apparatus-row-name { display: block; color: var(--milk); font-family: var(--serif); font-size: 14px; line-height: 1.45; }
.apparatus-row-meta { display: block; color: var(--brass); font-size: 9.5px; letter-spacing: 0.05em; margin-top: 2px; }
.apparatus-row-effect { display: block; color: var(--milk-dim); font-size: 10.5px; line-height: 1.5; margin-top: 4px; }

.apparatus-detail {
  min-width: 0;
  min-height: 620px;
  border: 1px solid var(--paper-line);
  background-color: var(--paper);
  background-image:
    linear-gradient(rgba(90,75,55,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90,75,55,0.055) 1px, transparent 1px);
  background-size: 24px 24px;
  color: var(--ink);
}

.apparatus-detail > .evidence-empty { color: var(--ink-soft); padding: 42px; }

.apparatus-card-head {
  padding: 34px 38px 28px;
  border-bottom: 1px solid var(--paper-line);
  background: rgba(239,231,214,0.94);
}

.apparatus-card-kicker {
  color: var(--rust-deep);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  margin-bottom: 7px;
}

.apparatus-card-head h2 {
  font-family: var(--serif);
  font-size: clamp(25px, 3vw, 39px);
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.35;
}

.apparatus-status-line {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 15px;
  color: var(--ink-soft);
  font-size: 9.5px;
  letter-spacing: 0.1em;
}

.apparatus-status-line span {
  border: 1px solid var(--paper-line);
  padding: 4px 8px;
  margin: 0 -1px -1px 0;
}

.apparatus-card-body { padding: 10px 38px 38px; }

.apparatus-section {
  padding: 23px 0 22px;
  border-bottom: 1px solid var(--paper-line);
}

.apparatus-section h3 {
  color: var(--rust-deep);
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.07em;
  margin-bottom: 10px;
}

.apparatus-section p,
.apparatus-section li { font-size: 12px; line-height: 1.85; }
.apparatus-section ul { padding-left: 1.2em; }
.apparatus-section li + li { margin-top: 3px; }

.apparatus-creative ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 18px;
  list-style: none;
  padding-left: 0;
}

.apparatus-creative li {
  position: relative;
  padding: 10px 10px 10px 28px;
  border: 1px solid rgba(168,75,38,0.28);
  background: rgba(255,255,255,0.18);
}

.apparatus-creative li::before {
  content: "→";
  position: absolute;
  left: 10px;
  color: var(--rust);
}

.apparatus-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  border-bottom: 1px solid var(--paper-line);
}

.apparatus-pair .apparatus-section { border-bottom: 0; }

.apparatus-prototype {
  margin: 16px 0;
  padding: 16px 18px;
  border: 1px solid rgba(119,134,95,0.65) !important;
  background: rgba(119,134,95,0.08);
}

.apparatus-control-chain {
  border-left: 3px solid var(--slate);
  padding: 8px 0 8px 13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px !important;
}

.apparatus-budget-section { background: rgba(156,130,63,0.07); margin: 0 -18px; padding-left: 18px; padding-right: 18px; }

.apparatus-budget { list-style: none; padding: 0 !important; }
.apparatus-budget li { display: flex; justify-content: space-between; gap: 18px; border-bottom: 1px dotted rgba(43,38,32,0.25); padding: 7px 0; }
.apparatus-budget b { color: var(--rust-deep); font-family: var(--serif); font-weight: 600; white-space: nowrap; }
.apparatus-budget-note { color: var(--ink-soft); font-size: 10px !important; margin-top: 9px; }

.apparatus-danger h3 { color: #7e2e21; }
.apparatus-danger { border-left: 4px solid rgba(126,46,33,0.7); padding-left: 16px; }

.apparatus-sources { list-style: none; padding-left: 0 !important; }
.apparatus-sources li { padding: 8px 0; border-bottom: 1px dotted rgba(43,38,32,0.23); }
.apparatus-sources a { color: var(--rust-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.apparatus-sources a span { font-size: 9px; letter-spacing: 0.06em; }
.apparatus-sources small { display: block; color: var(--ink-soft); font-size: 9px; letter-spacing: 0.04em; }

.apparatus-canonical-link {
  display: inline-flex;
  margin-top: 13px;
  color: var(--ink);
  border-bottom: 1px solid var(--rust);
  font-size: 11px;
  text-decoration: none;
}

.apparatus-idea-maker {
  margin: 24px -18px 4px;
  padding: 24px 22px;
  border: 1px solid rgba(156,130,63,0.38);
  background: linear-gradient(135deg, rgba(156,130,63,0.12), rgba(249,244,232,0.72));
}
.apparatus-idea-kicker { margin: 0 0 4px; color: var(--rust-deep); font-size: 9px; letter-spacing: .18em; }
.apparatus-idea-maker h3 { margin: 0; color: var(--ink); font-family: var(--serif); font-size: 19px; font-weight: 600; }
.apparatus-idea-maker > div > p:last-child { margin: 8px 0 18px; color: var(--ink-soft); font-size: 10.5px; line-height: 1.65; }
.apparatus-idea-maker label { display: block; margin: 12px 0 5px; color: var(--ink); font-size: 10px; font-weight: 700; }
.apparatus-idea-maker textarea,
.apparatus-idea-maker select {
  width: 100%;
  border: 1px solid rgba(43,38,32,0.25);
  border-radius: 2px;
  background: rgba(255,255,255,0.7);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  padding: 9px 10px;
}
.apparatus-idea-maker textarea { resize: vertical; line-height: 1.6; }
.apparatus-idea-maker textarea:focus,
.apparatus-idea-maker select:focus { outline: 2px solid rgba(156,130,63,0.45); outline-offset: 1px; }
.apparatus-idea-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }
.apparatus-idea-actions button {
  min-height: 38px;
  border: 1px solid var(--rust-deep);
  padding: 8px 13px;
  background: var(--rust-deep);
  color: #fffaf0;
  font-size: 11px;
  cursor: pointer;
}
.apparatus-idea-actions button + button { background: transparent; color: var(--rust-deep); }
.apparatus-idea-actions button:hover { filter: brightness(1.08); }
.apparatus-idea-status { min-height: 1.4em; margin: 9px 0 0; color: var(--rust-deep); font-size: 10px; }

.apparatus-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin-top: 28px;
  padding-top: 17px;
  border-top: 2px solid var(--ink);
}

.apparatus-card-foot p { max-width: 660px; color: var(--ink-soft); font-size: 9.5px; line-height: 1.65; }
.apparatus-card-foot a { color: var(--rust-deep); font-size: 11px; white-space: nowrap; }
.apparatus-mobile-back { display: none; color: var(--rust-deep); min-height: 32px; font-size: 11px; padding: 0; margin-bottom: 10px; }

/* ============ 資料棚（作品データベース） ============ */

#view-db { padding-left: 44px; }

.db-wrap {
  display: grid;
  grid-template-columns: 390px minmax(0, 1fr);
  gap: 28px;
  padding: 20px 24px 28px;
  max-width: 1520px;
  margin: 0 auto;
  align-items: start;
}

.db-list-pane {
  position: sticky;
  top: 64px;
  min-width: 0;
  height: calc(100vh - 84px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.db-shelf-intro {
  display: grid;
  grid-template-columns: 5.5em 1fr;
  align-items: end;
  gap: 12px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--line-dark);
}

.db-shelf-kicker {
  color: var(--rust-ink);
  font-size: 8.5px;
  letter-spacing: 0.18em;
  line-height: 1.45;
}

.db-shelf-intro h1 {
  color: var(--milk);
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: 0.13em;
  line-height: 1.25;
}

.db-shelf-intro div p {
  color: var(--milk-dim);
  font-size: 10px;
  line-height: 1.55;
  margin-top: 2px;
}

.db-search {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  flex: 0 0 auto;
  padding-bottom: 10px;
}

.db-shelf-switcher {
  grid-column: 1 / -1;
  padding: 11px 0 10px;
  border-bottom: 1px solid var(--line-dark);
}

.db-shelf-switcher-kicker {
  color: var(--rust-ink);
  font-size: 9.5px;
  letter-spacing: 0.24em;
  margin-bottom: 3px;
}

.db-shelf-switcher h2 {
  color: var(--milk);
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.45;
}

.db-shelf-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin-top: 8px;
}

.db-shelf-tab {
  /* 指で押す的を44px(Apple HIG)まで広げる。下の演出の型カードと高さが揃い、面の並びも整う */
  min-height: 44px;
  border: 1px solid var(--line-dark);
  color: var(--milk-dim);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.05em;
}

.db-shelf-tab:hover { color: var(--milk); background: rgba(240,231,214,0.04); }
.db-shelf-tab:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.db-shelf-tab[aria-checked="true"] {
  border-color: rgba(154,60,43,0.72);
  background: rgba(154,60,43,0.2);
  box-shadow: inset 0 -2px 0 var(--rust);
  color: var(--milk);
}

.db-shelf-description {
  color: var(--milk-dim);
  font-size: 10.5px;
  line-height: 1.6;
  margin-top: 7px;
}

.db-lenses {
  grid-column: 1 / -1;
  border-bottom: 1px solid var(--line-dark);
  padding: 11px 0 10px;
}

.db-lenses-head {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
}

.db-lenses-kicker {
  color: var(--rust-ink);
  font-size: 9.5px;
  letter-spacing: 0.24em;
  margin-bottom: 3px;
}

.db-lenses h2 {
  color: var(--milk);
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.45;
}

.db-lenses-note {
  color: var(--milk-dim);
  font-size: 10.5px;
  line-height: 1.5;
  margin-top: 4px;
}

.db-lens-clear {
  color: var(--milk-dim);
  border-bottom: 1px solid var(--line-dark);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  padding: 2px 0;
  white-space: nowrap;
}

.db-lens-clear:hover { color: var(--milk); border-bottom-color: var(--brass); }

.db-lens-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin-top: 8px;
}

.db-lens {
  display: grid;
  grid-template-columns: 1.8em minmax(0, 1fr);
  align-items: center;
  width: 100%;
  min-height: 44px;   /* 実測43pxで1px足りなかった。見た目はほぼ変わらない */
  gap: 5px;
  padding: 5px 7px;
  text-align: left;
  border: 1px solid var(--line-dark);
  color: var(--milk);
}

.db-lens:hover { background: rgba(240,231,214,0.04); }
.db-lens[aria-pressed="true"] { background: rgba(154,60,43,0.2); border-color: rgba(154,60,43,0.72); box-shadow: inset 2px 0 0 var(--rust); }

.db-lens-index {
  color: var(--rust-ink);
  font-size: 9.5px;
  letter-spacing: 0.12em;
}

.db-lens-copy { min-width: 0; }
.db-lens-label { display: block; font-family: var(--serif); font-size: 12.5px; letter-spacing: 0.04em; line-height: 1.35; }
.db-lens-desc { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.db-lens-count { grid-column: 2; color: var(--brass); font-size: 9px; white-space: nowrap; line-height: 1; }

.db-search input, .db-search .db-count, .db-filter-label, .db-depth-guide, .db-filter-more, #db-type { grid-column: 1 / -1; }
.db-search select { min-width: 0; }

.db-filter-label {
  color: var(--milk-dim);
  font-size: 9px;
  letter-spacing: 0.18em;
  margin-top: 2px;
}

.db-depth-guide {
  color: rgba(240,231,214,0.48);
  font-size: 10px;
  line-height: 1.6;
}

.db-depth-guide summary {
  color: var(--milk-dim);
  cursor: pointer;
  width: max-content;
  border-bottom: 1px dotted rgba(240,231,214,0.35);
}

.db-depth-guide p {
  border-left: 2px solid rgba(179,143,77,0.45);
  padding: 5px 0 0 8px;
}

.db-filter-more {
  color: var(--milk-dim);
  font-size: 10px;
}

.db-filter-more summary {
  cursor: pointer;
  width: max-content;
  border-bottom: 1px dotted rgba(240,231,214,0.35);
}

.db-filter-more > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}

.db-search input, .db-search select {
  background: var(--desk-2);
  border: 1px solid var(--line-dark);
  color: var(--milk);
  min-height: 44px;   /* 検索欄43px・セレクト40pxで的が小さかった */
  padding: 10px 12px;
  border-radius: 1px;
  font-size: 14px;
  width: 100%;
}

.db-search input::placeholder { color: rgba(240,231,214,0.32); }
.db-search input:focus, .db-search select:focus { outline: none; border-color: var(--brass); }

.db-count { font-size: 10.5px; color: var(--milk-dim); letter-spacing: 0.04em; grid-column: 1 / -1; }

.db-list {
  flex: 1 1 auto;
  min-height: 40px;
  overflow-y: auto;
  border: 1px solid var(--line-dark);
  background: rgba(0,0,0,0.15);
  scrollbar-color: var(--line-dark) transparent;
}

.db-row {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line-dark);
  border-left: 3px solid transparent;
}

.db-row:hover { background: var(--desk-2); }

.db-row.selected {
  background: var(--desk-2);
  border-left-color: var(--rust);
}

.db-row-titleline {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}

.db-row .t {
  font-family: var(--serif);
  font-size: 14.5px;
  color: var(--milk);
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.5;
}

.db-row .m { font-size: 11px; color: var(--milk-dim); }

.db-depth-mark {
  flex: 0 0 auto;
  display: inline-block;
  margin-top: 2px;
  padding: 1px 4px 2px;
  border: 1px solid var(--line-dark);
  color: var(--milk-dim);
  font-size: 8.5px;
  font-family: var(--sans);
  letter-spacing: 0.08em;
  line-height: 1.35;
  white-space: nowrap;
}

.db-depth-mark.research-level-3 { color: #d8bd79; border-color: rgba(216,189,121,0.6); }
.db-depth-mark.research-level-2 { color: var(--slate); border-color: rgba(117,145,153,0.5); }
.db-depth-mark.research-level-1 { color: var(--milk-dim); }
.db-depth-mark.depth-source_gap { color: #d3826e; border-color: rgba(168,75,38,0.7); }

.db-row .hit {
  display: block;
  font-size: 11px;
  color: var(--brass);
  margin-top: 3px;
  line-height: 1.65;
}

.db-detail {
  min-width: 0;
  max-width: 980px;
  overflow-wrap: anywhere;
  scroll-margin-top: 74px;
}

.db-mobile-back { display: none; }

.db-lens-digest-head {
  background: var(--desk-2);
  border-top: 3px solid var(--rust);
  border-bottom: 1px solid var(--line-dark);
  padding: 22px 24px 20px;
}

.db-lens-digest-title {
  color: var(--milk);
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.45;
}

.db-lens-digest-desc {
  color: rgba(240,231,214,0.82);
  font-size: 14px;
  line-height: 1.8;
  margin-top: 6px;
}

.db-lens-digest-count {
  color: var(--brass);
  font-size: 11px;
  letter-spacing: 0.15em;
  margin-top: 12px;
}

.db-lens-digest-note {
  color: var(--milk-dim);
  font-size: 11.5px;
  line-height: 1.8;
  padding: 12px 4px 3px;
}

.db-lens-results {
  border-top: 1px solid var(--line-dark);
  margin-top: 8px;
}

.db-lens-result {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 6px;
  padding: 18px 8px 19px 2px;
  border-bottom: 1px solid var(--line-dark);
}

.db-lens-result-index {
  color: var(--rust);
  font-size: 10px;
  letter-spacing: 0.14em;
  padding-top: 5px;
}

.db-lens-result-title {
  color: var(--milk);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.55;
  text-align: left;
  display: flex;
  width: 100%;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  text-decoration: underline;
  text-decoration-color: rgba(179,143,77,0.45);
  text-underline-offset: 5px;
}

.db-lens-result-title:hover {
  color: var(--brass);
  text-decoration-color: var(--brass);
}

.db-lens-result-meta {
  color: var(--milk-dim);
  font-size: 10.5px;
  line-height: 1.6;
  margin-top: 3px;
}

.db-lens-result-evidence {
  color: rgba(240,231,214,0.86);
  font-size: 13px;
  line-height: 1.85;
  margin-top: 10px;
  max-width: 76ch;
}

.db-lens-result-evidence span {
  color: var(--slate);
  display: block;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  line-height: 1.5;
  margin-bottom: 2px;
}

.dbd-lens-return {
  color: var(--brass);
  border-bottom: 1px solid rgba(179,143,77,0.45);
  font-size: 11px;
  letter-spacing: 0.08em;
  margin: 2px 0 10px;
  padding-bottom: 3px;
}

.dbd-lens-return:hover {
  color: var(--milk);
  border-bottom-color: var(--milk);
}

.dbd-head {
  background: var(--desk-2);
  border-top: 3px solid var(--rust);
  border-bottom: 1px solid var(--line-dark);
  padding: 24px 26px 22px;
}

.dbd-kicker {
  font-size: 10.5px;
  letter-spacing: 0.2em;
  color: var(--milk-dim);
  margin-bottom: 8px;
}

.dbd-title {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--milk);
  line-height: 1.5;
}

.dbd-orig { font-size: 13px; color: var(--milk-dim); margin-top: 2px; }

.dbd-meta { font-size: 13px; color: var(--milk); margin-top: 8px; }

.dbd-depth {
  margin-top: 16px;
  padding: 11px 0 10px 12px;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  border-left: 3px solid var(--milk-dim);
}

.dbd-depth.research-level-3 { border-left-color: #d8bd79; }
.dbd-depth.research-level-2 { border-left-color: var(--slate); }
.dbd-depth.research-level-1 { border-left-color: var(--milk-dim); }
.dbd-depth.depth-source_gap { border-left-color: var(--rust); }

.dbd-depth-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.dbd-depth-label {
  color: var(--milk);
  font-family: var(--serif);
  font-size: 16px;
  letter-spacing: 0.07em;
}

.dbd-depth-score {
  color: var(--brass);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-align: right;
}

.dbd-depth-reason,
.dbd-depth-next {
  color: rgba(240,231,214,0.82);
  font-size: 11.5px;
  line-height: 1.72;
  margin-top: 5px;
}

.dbd-depth-next { color: var(--slate); }

.dbd-depth-basis,
.dbd-depth-caveat {
  color: var(--milk-dim);
  font-size: 9.5px;
  line-height: 1.55;
  margin-top: 6px;
}

.dbd-depth-caveat { color: rgba(240,231,214,0.38); }

.dbd-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.dbd-technical {
  margin-top: 12px;
  color: var(--milk-dim);
  font-size: 10px;
}

.dbd-technical summary {
  cursor: pointer;
  width: max-content;
  border-bottom: 1px dotted rgba(240,231,214,0.3);
  letter-spacing: 0.08em;
}

.dbd-technical > p {
  margin-top: 7px;
  color: rgba(240,231,214,0.42);
}

.dbd-tags span {
  min-width: 0;
  font-size: 11px;
  color: var(--milk-dim);
  border: 1px solid var(--line-dark);
  padding: 2px 8px;
  border-radius: 1px;
}

.dbd-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.dbd-links a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  border: 1px solid var(--line-dark);
  color: var(--milk);
  padding: 4px 14px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-decoration: none;
  border-radius: 1px;
}

.dbd-links a span {
  color: var(--milk-dim);
  font-size: 9px;
  letter-spacing: 0.02em;
  margin-left: 8px;
}

.dbd-links a:hover { border-color: var(--brass); color: var(--milk); }

.dbd-links a.src {
  color: var(--slate);
  border-color: rgba(117,145,153,0.48);
}

.dbd-links a.utility {
  min-height: 30px;
  color: var(--milk-dim);
  border-color: transparent;
  border-bottom-color: var(--line-dark);
  padding-left: 4px;
  padding-right: 4px;
}

.dbd-reading-mark {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--rust);
  font-size: 8.5px;
  letter-spacing: 0.2em;
  margin: 20px 4px 0;
}

.dbd-reading-mark i {
  display: block;
  height: 1px;
  background: var(--line-dark);
  flex: 1;
}

.dbd-sec {
  border-top: 1px solid var(--line-dark);
  padding: 19px 6px 20px;
  margin-top: 0;
}

.dbd-sec h3 {
  font-size: 11px;
  font-weight: normal;
  letter-spacing: 0.28em;
  color: var(--brass);
  margin-bottom: 10px;
}

.dbd-sec ul { list-style: none; display: grid; gap: 6px; }

.dbd-sec li {
  min-width: 0;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--milk);
}

.dbd-sec li::before { content: "— "; color: var(--milk-dim); }

.dbd-sec li .dim { color: var(--milk-dim); font-size: 12px; }

.dbd-sec.fact h3 { color: var(--brass); }
.dbd-sec.unv h3 { color: var(--milk-dim); }
.dbd-sec.unv li {
  text-decoration: underline dashed rgba(240, 231, 214, 0.3);
  text-underline-offset: 4px;
}
.dbd-sec.interp h3 { color: var(--slate); }

.dbd-lens-note {
  color: var(--milk-dim);
  font-size: 11.5px;
  line-height: 1.75;
  margin-bottom: 10px;
}

.dbd-lens-item {
  border-top: 1px dashed var(--line-dark);
  padding: 10px 0;
}

.dbd-lens-item:first-of-type { border-top: none; padding-top: 0; }
.dbd-lens-item h4 { color: var(--milk); font-family: var(--serif); font-size: 14px; font-weight: 500; letter-spacing: 0.05em; }
.dbd-lens-item p { color: rgba(240,231,214,0.78); font-size: 12.5px; line-height: 1.78; margin-top: 5px; }
.dbd-lens-item .dbd-lens-field { color: var(--slate); font-size: 10.5px; letter-spacing: 0.12em; margin-right: 6px; }

.dbd-item { padding: 10px 0; border-top: 1px dashed var(--line-dark); }
.dbd-item:first-of-type { border-top: none; padding-top: 0; }

.dbd-item .ft { font-size: 13.5px; color: var(--milk); line-height: 1.7; }
.dbd-item .ft .dim { font-size: 11px; color: var(--milk-dim); }
.dbd-item .fd { font-size: 12.5px; color: rgba(240,231,214,0.75); margin-top: 3px; line-height: 1.8; }
.dbd-item .fn { font-size: 12px; color: var(--slate); margin-top: 3px; line-height: 1.7; }
.dbd-item .fc { font-size: 10.5px; color: var(--milk-dim); margin-top: 3px; }

.dbd-work-link {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid var(--line-dark);
  background: transparent;
  border-radius: 1px;
  padding: 10px 14px;
  margin-bottom: 8px;
}

.dbd-work-link:hover { border-color: var(--brass); }

.dbd-work-link .t {
  font-family: var(--serif);
  font-size: 14.5px;
  color: var(--milk);
  display: block;
  line-height: 1.5;
}

.dbd-work-link .m { font-size: 11px; color: var(--milk-dim); }

.dbd-work-link .why {
  display: block;
  font-size: 11.5px;
  color: var(--slate);
  margin-top: 3px;
  line-height: 1.6;
}

/* サブ画面（スクラップブック・場面問答）の枠 */
#view-seeds, #view-mondo {
  display: flex;
  justify-content: center;
  padding: 12px 24px 64px 68px;
}

#view-seeds .seeds, #view-mondo .mondo {
  margin-top: 24px;
  border-top: none;
  padding-top: 0;
}

#view-seeds .desk-inner { max-width: 1480px; }

/* ============ 舞台スケッチ（2Dの構図習作） ============ */

#view-stage {
  min-height: calc(100vh - 49px);
  padding: 26px 24px 64px 68px;
}

.stage-sketch {
  width: 100%;
  max-width: 3000px;
  margin: 0 auto;
}

.stage-sketch-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--line-dark);
  padding: 0 0 18px;
  margin-bottom: 18px;
}

.stage-sketch-kicker {
  color: var(--rust);
  font-size: 9.5px;
  letter-spacing: 0.28em;
  margin-bottom: 4px;
}

.stage-app-version {
  margin-left: 0.55em;
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 0.38em;
  font-weight: 500;
  letter-spacing: 0.04em;
  vertical-align: 0.3em;
}

.stage-sketch-head h1 {
  color: var(--milk);
  font-family: var(--serif);
  font-size: clamp(24px, 3vw, 33px);
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.4;
}

/* β版の印。囲みではなく、上のキッカーと同じ小さな錆色の字で添える。
   枠付きの札にすると、題そのものより先に目へ入ってしまう。 */
.stage-beta {
  margin-left: 12px;
  color: var(--rust);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.2em;
  vertical-align: middle;
}

/* 保存の注意。題と道具の間、画面の上中央に置く。
   読ませたいが騒がせたくないので、左に一本の錆色の線だけを引く。 */
.stage-storage-caution {
  flex: 0 1 420px;
  margin: 0 0 3px;
  padding-left: 11px;
  border-left: 2px solid rgba(168, 75, 38, 0.65);
  color: var(--milk-dim);
  font-size: 11px;
  line-height: 1.65;
  letter-spacing: 0.02em;
}

/* iPadなどのホーム画面版では、上端の説明を省いて作図面を優先する。 */
html.stage-pwa-tablet .stage-sketch-kicker,
html.stage-pwa-tablet .stage-storage-caution {
  display: none;
}

.stage-sketch-head > div:first-child > p:last-child {
  color: var(--milk-dim);
  font-size: 12px;
  letter-spacing: 0.05em;
  margin-top: 3px;
}

.stage-history-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.stage-history-actions button,
.stage-history-actions a,
.stage-tool-grid button,
.stage-piece-buttons button,
.stage-layer-actions button,
.stage-minor-action,
.stage-delete {
  min-height: 38px;
  border: 1px solid var(--line-dark);
  color: var(--milk-dim);
  padding: 6px 11px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-align: center;
  text-decoration: none;
}

.stage-history-actions button:hover,
.stage-history-actions a:hover,
.stage-tool-grid button:hover,
.stage-piece-buttons button:hover,
.stage-layer-actions button:hover,
.stage-minor-action:hover {
  color: var(--milk);
  border-color: var(--brass);
}

.stage-history-actions button:disabled {
  opacity: 0.28;
  cursor: default;
}

.stage-history-actions .stage-export {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--paper);
  border-color: var(--rust);
  background: var(--rust-deep);
  padding-left: 16px;
  padding-right: 16px;
}

.stage-history-actions .stage-export:hover { background: var(--rust); }

.stage-sketch-grid {
  display: grid;
  /* 右列にも場面など中身のあるパネルが入るので、左右を同じ幅にする */
  grid-template-columns: 268px minmax(420px, 1fr) 268px;
  grid-template-areas: "tools board inspector";
  gap: 18px;
  align-items: start;
}

.stage-toolbox {
  grid-area: tools;
  min-width: 0;
}

.stage-board-column {
  grid-area: board;
  min-width: 0;
}

.stage-inspector {
  grid-area: inspector;
  min-width: 0;
}

.stage-tool-section,
.stage-save-note {
  border-top: 1px solid var(--line-dark);
  padding: 13px 0 16px;
}

.stage-tool-section:first-child { border-top-color: var(--brass); }

.stage-tool-section h2,
.stage-save-note h2 {
  color: var(--brass);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  margin-bottom: 9px;
}

.stage-tool-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.stage-tool-grid button + button { border-left: 0; }

.stage-tool-grid button[aria-pressed="true"] {
  color: var(--paper);
  border-color: var(--rust);
  background: rgba(168,75,38,0.27);
}

.stage-tool-hint {
  color: var(--milk-dim);
  font-size: 10.5px;
  line-height: 1.65;
  margin-top: 8px;
}

.stage-piece-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin-bottom: 12px;
}

.stage-piece-buttons button {
  min-height: 42px;
  padding: 6px;
}

.stage-control-label {
  display: block;
  color: var(--milk-dim);
  font-size: 10px;
  letter-spacing: 0.1em;
  margin: 9px 0 5px;
}

.stage-range-label {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

/* 舞台セットの一覧は2段。名前は幅いっぱいに取り、寸法と操作を下の段へ回す。
   1段に詰めると名前が「テー…」のように切れて、どれがどれか分からなくなる。 */
.stage-add-light {
  width: 100%;
  margin-bottom: 4px;
}

.stage-set-row {
  display: grid;
  gap: 4px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(240, 231, 214, 0.07);
}

.stage-set-row:last-child { border-bottom: none; }

.stage-set-head {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
}

/* 場面は入れ子にできる。字下げで親子を見せ、セクションは入れ物として区別する。
   選んでいる場面だけ開いて、名前とメモをその場に持つ。 */
/* 枠と余白は開いていない行にも同じだけ持たせる。開いた行だけ内側へ寄ると、
   同じ深さなのに一段内側にいるように見えてしまう。 */
.stage-scene-row {
  display: block;
  margin-bottom: 4px;
  padding: 3px;
  border: 1px solid transparent;
}

.stage-scene-head {
  display: grid;
  /* 取っ手・名前・鉛筆。鉛筆は選んでいる行にだけ出るので、
     出ていないときは3列目を畳んで幅を無駄にしない */
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px;
}

.stage-scene-pen {
  border: 1px solid transparent;
  background: none;
  color: rgba(240, 231, 214, 0.5);
  font-size: 12px;
  line-height: 1;
  padding: 4px 5px;
  border-radius: 2px;
  cursor: pointer;
}

.stage-scene-pen:hover,
.stage-scene-pen:focus-visible {
  color: var(--brass);
  border-color: rgba(211, 172, 89, 0.45);
}

.stage-scene-outdent,
.stage-scene-indent {
  border: 1px solid transparent;
  background: none;
  color: rgba(240, 231, 214, 0.5);
  font-size: 12px;
  line-height: 1;
  padding: 4px 5px;
  border-radius: 2px;
  cursor: pointer;
}

.stage-scene-outdent:hover:not(:disabled),
.stage-scene-outdent:focus-visible:not(:disabled),
.stage-scene-indent:hover:not(:disabled),
.stage-scene-indent:focus-visible:not(:disabled) {
  color: var(--brass);
  border-color: rgba(211, 172, 89, 0.45);
}

.stage-scene-outdent:disabled,
.stage-scene-indent:disabled {
  opacity: 0.28;
  cursor: default;
}

.stage-rename-modal { max-width: 380px; }

.stage-rename-colors {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stage-rename-colors[hidden] { display: none; }

.stage-rename-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.stage-rename-swatch {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
}

.stage-rename-swatch[aria-pressed="true"] {
  border-color: rgba(240, 231, 214, 0.85);
  box-shadow: inset 0 0 0 1px rgba(57, 45, 36, 0.35);
}

.stage-rename-swatch.is-auto {
  background: none;
  color: var(--milk-dim);
  font-size: 8px;
  line-height: 1;
}

/* 劇場の実寸。三つ並べても読めるよう、単位は小さく右へ添える */
.stage-dim-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin: 8px 0 6px;
}

.stage-dim-cell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  color: var(--milk-dim);
  letter-spacing: 0.04em;
}

.stage-dim-cell span { grid-column: 1 / -1; }

.stage-dim-cell input {
  min-width: 0;
  min-height: 28px;
  border: 1px solid var(--line-dark);
  background: var(--desk-2);
  color: var(--milk);
  font-family: var(--sans);
  font-size: 11.5px;
  padding: 3px 5px;
}

.stage-dim-cell input:focus { border-color: var(--brass); outline: none; }

/* 決め打ちの規模を選んでいるあいだは、寸法の欄は読むだけ */
.stage-dim-cell input:disabled { opacity: 0.42; cursor: default; }

.stage-dim-cell i {
  font-style: normal;
  font-size: 9.5px;
  color: rgba(240, 231, 214, 0.4);
}

.stage-dim-cell[hidden] { display: none; }

/* 動線の先へ動かした場面を作るボタン。場面の枠の中に置く */
.stage-scene-apply {
  width: 100%;
  margin-top: 6px;
  font-size: 0.76rem;
}

.stage-scene-apply:disabled { opacity: 0.4; cursor: default; }

.stage-scene-head .stage-scene-chip { width: 100%; min-width: 0; }

.stage-scene-grip {
  color: rgba(240, 231, 214, 0.28);
  font-size: 12px;
  line-height: 1;
  text-align: center;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.stage-scene-row:hover .stage-scene-grip { color: var(--brass); }

/* 開いている場面は、見出しとメモをまとめて一つの枠で囲う。
   見出しだけに枠が付いていると、メモがどの場面のものか読み取りにくい。 */
.stage-scene-row.is-open {
  border-color: var(--rust);
  background: rgba(168, 75, 38, 0.07);
}

.stage-scene-row.is-open .stage-scene-chip {
  border-color: transparent;
  background: rgba(168, 75, 38, 0.14);
}

.stage-scene-row.is-open .stage-scene-chip.is-open::before { display: none; }

.stage-scene-body {
  display: grid;
  gap: 5px;
  padding: 5px 2px 2px 20px;
}

.stage-scene-beat {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 7px;
  padding: 6px 8px;
  border-left: 2px solid rgba(211, 172, 89, 0.45);
  color: var(--milk-dim);
  font-size: 10px;
  line-height: 1.55;
}

.stage-scene-beat-energy {
  color: var(--brass);
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* 光の意図はシーン一覧では一行だけ。照明の設定札ではなく、
   稽古用キューシートの欄外メモのように左の金線で区別する。 */
.stage-scene-light-summary {
  margin: 3px 4px 1px 20px;
  padding-left: 7px;
  border-left: 1px solid rgba(211, 172, 89, 0.48);
  color: rgba(240, 231, 214, 0.48);
  font-size: 9.5px;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stage-scene-light-summary::before {
  content: "LIGHT · ";
  color: var(--brass);
  font-size: 8px;
  letter-spacing: 0.12em;
}

/* 名前をその場で書き換えているあいだ。入力中だとはっきり分かる見た目にする */
.stage-scene-rename {
  min-width: 0;
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--brass);
  background: var(--desk-2);
  color: var(--paper);
  font: inherit;
  font-size: 13px;
  letter-spacing: 0.04em;
  padding: 6px 10px;
  outline: 2px solid rgba(211, 172, 89, 0.35);
  outline-offset: -1px;
}

.stage-scene-body .stage-text-input {
  min-height: 30px;
  margin-bottom: 0;
  font-size: 11.5px;
}

.stage-scene-body textarea.stage-text-input {
  min-height: 46px;
  resize: vertical;
  line-height: 1.6;
}

.stage-rehearsal-time-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.stage-rehearsal-time-grid label {
  display: grid;
  gap: 3px;
  color: var(--milk-dim);
  font-size: 10px;
  letter-spacing: 0.04em;
}

.stage-rehearsal-time-grid label > span:last-child {
  display: flex;
  align-items: center;
  gap: 3px;
}

.stage-rehearsal-time-grid input {
  min-width: 0;
  width: 100%;
  min-height: 32px;
  border: 1px solid var(--line-dark);
  background: var(--desk-2);
  color: var(--milk);
  font: 11.5px var(--sans);
  padding: 4px 6px;
}

.stage-rehearsal-time-grid input:focus {
  border-color: var(--brass);
  outline: none;
}

.stage-scene-rehearsal-times {
  padding-bottom: 5px;
  border-bottom: 1px dashed rgba(240, 231, 214, 0.16);
}

/* 掴んで動かしている行と、その跡の空き */
.stage-scene-row.is-dragging {
  opacity: 0.97;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6);
  cursor: grabbing;
}

.stage-scene-hole {
  border: 1px dashed rgba(168, 75, 38, 0.5);
  background: rgba(168, 75, 38, 0.07);
  box-sizing: border-box;
  margin-bottom: 4px;
}

/* 開いている場面は、起点の印とは別に細い線で示す */
.stage-scene-chip.is-open .stage-scene-name { color: var(--paper); }
.stage-scene-chip.is-open::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--rust);
}
.stage-scene-chip { position: relative; }

.stage-scene-chip.is-section {
  background: rgba(156, 130, 63, 0.08);
  border-color: rgba(156, 130, 63, 0.32);
}

.stage-scene-chip.is-section .stage-scene-name {
  color: var(--brass);
  letter-spacing: 0.08em;
}

.stage-scene-chip.is-section .stage-scene-num {
  color: var(--brass);
  font-size: 11px;
}

/* 舞台が一度に入らない席では、掴んで視線を振れる */
#stage-canvas[data-pannable="true"] { cursor: grab; }
canvas[data-tool="route"] { cursor: crosshair; }
canvas[data-tool="note"] { cursor: copy; }

/* メモの書き込み窓。舞台の絵の上、その付箋の位置へ重ねて出す */
.stage-note-editor {
  position: absolute;
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  background: var(--desk-2);
  border: 1px solid var(--brass);
  box-shadow: 0 10px 24px rgba(13, 12, 11, 0.55);
  min-width: 168px;
}

.stage-note-editor textarea {
  width: 100%;
  resize: vertical;
  border: 1px solid var(--line-dark);
  background: var(--desk);
  color: var(--milk);
  /* 絵の上の付箋（NOTE_FONT）と同じ大きさ。ここだけ小さいと、
     書いているときと貼り終えたときで字の大きさが変わって見える */
  font: 15px/1.45 'Hiragino Kaku Gothic ProN', sans-serif;
  padding: 6px 7px;
}

.stage-note-editor textarea:focus {
  outline: 2px solid rgba(168, 75, 38, 0.55);
  outline-offset: 1px;
}

.stage-note-editor-bar {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.stage-note-editor-bar .btn-quiet {
  padding: 3px 9px;
  font-size: 0.74rem;
  color: var(--milk-dim);
  border-color: var(--line-dark);
}
#stage-canvas[data-pannable="true"][data-dragging="true"] { cursor: grabbing; }

/* 書き出しの選び方 */
.stage-export-modal { width: min(420px, calc(100vw - 40px)); }

.stage-export-scope {
  display: grid;
  gap: 5px;
}

.stage-export-scope button {
  min-height: 34px;
  border: 1px solid var(--line-dark);
  background: var(--desk);
  color: var(--milk-dim);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.stage-export-scope button:hover { border-color: var(--brass); color: var(--milk); }

.stage-export-scope button[aria-pressed="true"],
.stage-modal .stage-tool-grid button[aria-pressed="true"] {
  color: var(--paper);
  border-color: var(--rust);
  background: rgba(168, 75, 38, 0.27);
}

#stage-export-run { margin-top: 12px; }

/* ショーの棚。端末に置いた全部を並べ、押すと切り替わる */
.stage-shows-modal { width: min(520px, calc(100vw - 40px)); }

.stage-show-list { display: grid; gap: 6px; margin-top: 10px; }

.stage-show-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: stretch;
}

.stage-show-open {
  display: grid;
  gap: 3px;
  padding: 9px 11px;
  border: 1px solid var(--line-dark);
  background: var(--desk);
  color: var(--milk-dim);
  text-align: left;
  cursor: pointer;
}

.stage-show-open:hover { border-color: var(--brass); color: var(--milk); }

.stage-show-row.is-current .stage-show-open {
  border-color: var(--rust);
  background: rgba(168, 75, 38, 0.14);
  color: var(--paper);
}

.stage-show-title { font-size: 13px; letter-spacing: 0.04em; }
.stage-show-meta { font-size: 10px; color: rgba(240, 231, 214, 0.42); }

/* 構成テンプレートは、選ぶ前に全シーンの役割と呼吸を読み切れる一覧にする。
   決定ボタンだけを先に目立たせず、設計図を読んでから新規ショーを作る順序。 */
.stage-beat-template-lead {
  color: var(--milk-dim);
  font-size: 11.5px;
  line-height: 1.8;
  margin-bottom: 12px;
}

.stage-beat-template-list {
  display: grid;
  gap: 9px;
}

.stage-beat-template-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 178px;
  gap: 8px 14px;
  padding: 11px 12px;
  border: 1px solid var(--line-dark);
  background: var(--desk);
}

.stage-beat-template-card.is-held {
  border-style: dashed;
  background: rgba(211, 172, 89, 0.035);
}

.stage-beat-template-copy { min-width: 0; }

.stage-beat-template-heading {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--paper);
  font-family: var(--serif);
  font-size: 13.5px;
  line-height: 1.5;
}

.stage-beat-template-number {
  color: var(--rust);
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 0.12em;
}

.stage-beat-template-count {
  color: rgba(240, 231, 214, 0.48);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  margin-top: 2px;
}

.stage-beat-template-roles {
  color: var(--milk-dim);
  font-size: 10.5px;
  line-height: 1.75;
  margin-top: 7px;
}

.stage-beat-template-side {
  display: grid;
  align-content: space-between;
  gap: 9px;
}

.stage-beat-energy {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.stage-beat-energy-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 25px;
  min-height: 25px;
  border: 1px solid rgba(211, 172, 89, 0.34);
  color: var(--milk-dim);
  font-size: 9px;
}

.stage-beat-energy-step[data-energy="1"] { background: rgba(168, 75, 38, 0.05); }
.stage-beat-energy-step[data-energy="2"] { background: rgba(168, 75, 38, 0.10); }
.stage-beat-energy-step[data-energy="3"] { background: rgba(168, 75, 38, 0.17); }
.stage-beat-energy-step[data-energy="4"] { background: rgba(168, 75, 38, 0.24); color: var(--milk); }
.stage-beat-energy-step[data-energy="5"] { background: rgba(168, 75, 38, 0.34); color: var(--paper); }

.stage-beat-template-curve-text,
.stage-beat-template-hold {
  color: rgba(240, 231, 214, 0.54);
  font-size: 9.5px;
  line-height: 1.6;
}

.stage-beat-template-hold { color: var(--brass); }

.stage-beat-template-apply {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line-dark);
  background: none;
  color: var(--milk-dim);
  font-size: 10.5px;
  letter-spacing: 0.04em;
}

.stage-beat-template-apply:hover { border-color: var(--brass); color: var(--milk); }
.stage-beat-template-apply:disabled { opacity: 0.42; cursor: not-allowed; }

@media (max-width: 680px) {
  .stage-beat-template-card { grid-template-columns: 1fr; }
}

/* 姿勢は名前だけでは違いが伝わらないので、形を並べて選ぶ */
.stage-pose-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--line-dark);
  background: var(--desk);
  color: var(--milk);
  font-size: 12px;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.stage-pose-button:hover { border-color: var(--brass); }

/* 姿勢の窓は横へ広く取る。縦一列に近い並びだと、13種類を見るのに
   窓の中をずっと繰ることになる（横へ6つ並べれば二段で収まる） */
.stage-pose-modal { width: min(1020px, calc(100vw - 40px)); }

.stage-pose-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

@media (max-width: 1080px) {
  .stage-pose-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .stage-pose-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.stage-pose-tile {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 8px 4px 10px;
  border: 1px solid var(--line-dark);
  background: rgba(13, 12, 11, 0.5);
  color: var(--milk-dim);
  font-size: 11px;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.stage-pose-tile canvas {
  width: 100%;
  height: auto;
  display: block;
}

.stage-pose-tile:hover { border-color: var(--brass); color: var(--milk); }

.stage-pose-tile.is-on {
  border-color: var(--rust);
  background: rgba(168, 75, 38, 0.16);
  color: var(--paper);
}

.stage-modal #stage-light-preset-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

/* 名前は2行まで置ける高さを確保する。1行に詰めると
   〈ビームクロス（床から交差）〉のような長い名前が切れる。 */
.stage-modal #stage-light-preset-tiles .stage-pose-tile {
  padding: 8px 8px 11px;
  align-content: start;
}

.stage-modal #stage-light-preset-tiles .stage-pose-tile span {
  line-height: 1.45;
  text-align: center;
}

/* 装置の型は寸法を持たないので、名前を1行、操作を1行に */
.stage-rig-head { grid-template-columns: minmax(0, 1fr); }
.stage-rig-foot { padding-left: 0; }
.stage-rig-foot .stage-cast-status { font-size: 10px; padding: 3px 7px; }

.stage-set-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 5px;
  padding-left: 26px;
}

.stage-set-foot .stage-set-dims {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 舞台セットの一覧で、寸法を一目で読ませる */
.stage-set-dims {
  flex: 0 0 auto;
  font-size: 10px;
  letter-spacing: 0.02em;
  color: rgba(239, 231, 214, 0.46);
  white-space: nowrap;
}

.stage-dims-note {
  margin: 4px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: rgba(211, 172, 89, 0.72);
}

/* 向きのフェーダーの目盛り。中央が客席向きであることを字で示す */
.stage-range-scale {
  display: flex;
  justify-content: space-between;
  margin: 2px 0 0;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: rgba(239, 231, 214, 0.34);
}

.stage-range-scale span:nth-child(2) {
  color: rgba(239, 231, 214, 0.62);
}

.stage-seri-warning {
  color: rgba(192,57,43,0.92);
  font-size: 10.5px;
  line-height: 1.55;
  margin: 5px 0 0;
}

.stage-color-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stage-color-row input[type="color"],
#stage-selected-color {
  width: 42px;
  height: 34px;
  flex: 0 0 42px;
  border: 1px solid var(--line-dark);
  background: transparent;
  padding: 2px;
}

.stage-swatches {
  display: flex;
  gap: 5px;
}

.stage-swatches button {
  width: 30px;
  min-height: 30px;
  border: 1px solid rgba(240,231,214,0.32);
  background: var(--stage-swatch);
}

.stage-swatches button:hover { border-color: var(--paper); }

#stage-brush-size,
#stage-piece-size {
  width: 100%;
  accent-color: var(--rust);
}

.stage-minor-action {
  width: 100%;
  margin-top: 10px;
  text-align: left;
}

.stage-board-frame {
  position: relative;
  border: 1px solid rgba(156,130,63,0.7);
  background: #0d0c0b;
  box-shadow: 0 12px 34px rgba(0,0,0,0.28);
  /* グリッドの列に入るので、canvas の固有幅で押し広げられないようにする */
  min-width: 0;
}

#stage-canvas,
#stage-plan-canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  touch-action: none;
  user-select: none;
}

/* 形は触っているものを当てて決める（cursorFor）。ここでは既定だけ置く */
#stage-canvas[data-tool="select"],
#stage-plan-canvas[data-tool="select"] { cursor: default; }
#stage-canvas[data-dragging="true"],
#stage-plan-canvas[data-dragging="true"] { cursor: grabbing; }
#stage-canvas[data-tool="paint"] { cursor: crosshair; }
#stage-canvas[data-tool="erase"] { cursor: cell; }

.stage-depth-label {
  position: absolute;
  z-index: 2;
  left: 13px;
  pointer-events: none;
  color: rgba(239,231,214,0.42);
  font-size: 8.5px;
  letter-spacing: 0.16em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.75);
}

.stage-depth-back { top: 9px; }
.stage-depth-front { bottom: 8px; }

.stage-canvas-help {
  color: var(--milk-dim);
  font-size: 10.5px;
  line-height: 1.7;
  margin-top: 8px;
}

.stage-selection-empty {
  color: var(--milk-dim);
  font-size: 11px;
  line-height: 1.75;
}

.stage-selected-name {
  color: var(--milk);
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.5;
  padding-bottom: 8px;
  margin-bottom: 4px;
  border-bottom: 1px dashed var(--line-dark);
}

.stage-layer-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 12px;
}

.stage-layer-actions button + button { border-left: 0; }

.stage-delete {
  width: 100%;
  color: rgba(231,150,120,0.82);
  border-color: rgba(168,75,38,0.5);
  margin-top: 5px;
  text-align: left;
}

.stage-delete:hover {
  color: var(--paper);
  border-color: var(--rust);
  background: rgba(168,75,38,0.18);
}

.stage-save-note p {
  color: var(--milk-dim);
  font-size: 10.5px;
  line-height: 1.7;
}

.stage-boundary-note {
  color: rgba(240,231,214,0.38);
  font-size: 10.5px;
  line-height: 1.8;
  border-top: 1px solid var(--line-dark);
  margin-top: 18px;
  padding-top: 11px;
}

/* ============ 机（ホーム） ============ */

#view-desk {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  padding: 11vh 24px 64px 68px;
}

.desk-inner {
  width: 100%;
  max-width: 660px;
}

.desk-note {
  font-size: 12px;
  color: var(--milk-dim);
  letter-spacing: 0.06em;
  margin-bottom: 3.5em;
}

.desk-question {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(24px, 4.2vw, 34px);
  letter-spacing: 0.08em;
  color: var(--milk);
  margin-bottom: 1.8em;
}

/* 紙のカード: 机上の紙。影は「置いてある」程度に留める */
.paper-card {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid rgba(0,0,0,0.55);
  border-radius: 1px;
  box-shadow: 0 2px 0 rgba(0,0,0,0.45);
  padding: 26px 28px 22px;
  cursor: pointer;
  transition: transform 120ms ease;
}

.paper-card:hover { transform: translateY(-2px); }
.paper-card:active { transform: translateY(0); }

.desk-projects {
  margin-bottom: 28px;
}

.desk-projects h2 {
  font-family: var(--serif);
  font-size: 16px;
  letter-spacing: 0.12em;
  margin-bottom: 12px;
  color: var(--milk);
}

.desk-project-list {
  display: grid;
  gap: 12px;
}

.desk-project-card {
  position: relative;
  padding-right: 92px;
}

.desk-project-delete {
  position: absolute;
  right: 18px;
  top: 18px;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--paper-line);
  font-size: 12px;
  padding-bottom: 1px;
}

.desk-project-delete:hover {
  color: var(--rust);
  border-bottom-color: var(--rust);
}

.paper-kicker {
  font-size: 11px;
  letter-spacing: 0.28em;
  color: var(--rust);
  margin-bottom: 10px;
}

.paper-kicker .k {
  float: right;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}

.paper-card h2 {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.paper-sub {
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 16px;
}

.paper-next {
  border-top: 1px solid var(--paper-line);
  padding-top: 14px;
  font-size: 14px;
  line-height: 1.7;
}

.paper-next .label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--ink-soft);
  margin-bottom: 2px;
}

.paper-thumbs {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.paper-thumbs .thumb {
  width: 72px;
  height: 54px;
  border: 1px solid var(--paper-line);
  overflow: hidden;
  background: var(--paper-2);
}

.paper-thumbs .thumb svg { width: 100%; height: 100%; display: block; }

.paper-return {
  display: inline-block;
  margin-top: 18px;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--rust);
  border-bottom: 1px solid var(--rust);
  padding-bottom: 1px;
}

/* 新しい問い */
.new-question {
  margin-top: 56px;
}

.new-question label {
  display: block;
  font-family: var(--serif);
  font-size: 16px;
  letter-spacing: 0.12em;
  margin-bottom: 12px;
  color: var(--milk);
}

.new-question textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line-dark);
  color: var(--milk);
  padding: 8px 2px 12px;
  resize: vertical;
  min-height: 52px;
  line-height: 1.7;
}

.new-question textarea::placeholder { color: rgba(240,231,214,0.32); }

.new-question textarea:focus {
  outline: none;
  border-bottom-color: var(--brass);
}

.new-question .row {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.btn-quiet {
  color: var(--milk);
  border: 1px solid var(--line-dark);
  padding: 8px 22px;
  letter-spacing: 0.15em;
  border-radius: 1px;
  transition: border-color 120ms ease;
}

.btn-quiet:hover { border-color: var(--brass); color: var(--milk); }

.seed-history-reset {
  color: var(--milk-dim);
  border-color: rgba(179,143,77,0.42);
  padding-left: 13px;
  padding-right: 13px;
  font-size: 10.5px;
  letter-spacing: 0.08em;
}

.seed-history-reset:disabled {
  border-color: rgba(255,255,255,0.1);
  color: rgba(240,231,214,0.3);
  cursor: not-allowed;
}

.seed-catalog-note {
  max-width: 70em;
  margin: -6px 0 16px;
  color: var(--brass);
  font-family: var(--serif);
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: 0.04em;
}

/* ============ スクラップブック ============ */

.seeds {
  margin-top: 64px;
  border-top: 1px solid var(--line-dark);
  padding-top: 28px;
}

.seeds-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.seeds-head h2 {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.3em;
  color: var(--milk);
}

.seeds-sub {
  font-size: 12px;
  color: var(--milk-dim);
  letter-spacing: 0.05em;
  flex: 1;
  min-width: 0;
}

.seed-pool-status {
  color: var(--brass);
  font-size: 9.5px;
  letter-spacing: 0.13em;
  padding-top: 2px;
  margin: 0 0 13px;
}

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

.scrapbook-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.9fr);
  gap: 28px;
  align-items: start;
}

.scrapbook-deck { min-width: 0; }

.scrapbook-deck-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 18px;
  flex-wrap: wrap;
}

.scrapbook-deck-actions {
  display: flex;
  align-items: center;
  gap: 10px 13px;
  flex-wrap: wrap;
}

.scrapbook-deck-actions .btn-quiet {
  border-color: rgba(179,143,77,0.62);
  background: rgba(179,143,77,0.07);
}

.scrapbook-deck-actions .btn-quiet:hover {
  background: rgba(168,75,38,0.22);
  border-color: var(--rust);
}

.scrapbook-deck-actions .seed-pool-status { margin: 0; }

.scrapbook-drag-hint {
  color: var(--milk-dim);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  margin: 0 0 13px;
}

.scrapbook-rail {
  position: sticky;
  top: 70px;
  background: var(--paper-2);
  color: var(--ink);
  border: 1px solid rgba(0,0,0,0.55);
  box-shadow: 5px 6px 0 rgba(0,0,0,0.2);
  padding: 18px 16px 16px;
}

.scrapbook-rail-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(0,0,0,0.24);
}

.scrapbook-kicker {
  color: var(--rust-deep);
  font-size: 9px;
  letter-spacing: 0.21em;
  line-height: 1.35;
}

.scrapbook-rail h3,
.scrapbook-builder h3 {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.35;
}

.scrapbook-rail-count {
  color: var(--ink-soft);
  font-size: 10px;
  line-height: 1.45;
  max-width: 11em;
  text-align: right;
}

.scrapbook-drop {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 8px;
  align-items: center;
  min-height: 68px;
  margin: 13px 0 12px;
  padding: 10px 12px;
  border: 1px dashed rgba(43,38,32,0.52);
  color: var(--ink-soft);
  transition: background 120ms ease, border-color 120ms ease;
}

.scrapbook-drop span {
  color: var(--rust-deep);
  font-family: var(--serif);
  font-size: 23px;
  line-height: 1;
  text-align: center;
}

.scrapbook-drop p {
  font-family: var(--serif);
  font-size: 13px;
  line-height: 1.5;
}

.scrapbook-drop.is-dragover {
  background: rgba(168,75,38,0.11);
  border-color: var(--rust-deep);
}

.seed-card {
  background: var(--desk-2);
  border: 1px solid var(--line-dark);
  border-radius: 1px;
  padding: 14px 16px 10px;
  display: flex;
  flex-direction: column;
}

.seed-card[draggable="true"] { cursor: grab; }
.seed-card[draggable="true"]:active { cursor: grabbing; }
.seed-card.is-dragging { opacity: 0.42; transform: rotate(-1deg); }

.seed-recipe {
  font-size: 10.5px;
  letter-spacing: 0.2em;
  color: var(--slate);
  margin-bottom: 8px;
}

.seed-text {
  font-family: var(--serif);
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--milk);
  flex: 1;
}

.seed-provenance {
  margin-top: 12px;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}

.seed-provenance summary {
  position: relative;
  padding: 9px 20px 9px 0;
  color: var(--brass);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  cursor: pointer;
  list-style: none;
}

.seed-provenance summary::-webkit-details-marker { display: none; }

.seed-provenance summary::after {
  content: "＋";
  position: absolute;
  right: 1px;
  color: var(--milk-dim);
}

.seed-provenance[open] summary::after { content: "−"; }

.seed-provenance-body {
  border-top: 1px dashed var(--line-dark);
  padding: 10px 0 11px 11px;
}

.seed-provenance-label,
.seed-transform span {
  display: block;
  color: var(--slate);
  font-size: 9px;
  letter-spacing: 0.16em;
  margin-bottom: 5px;
}

.seed-provenance ul {
  display: grid;
  gap: 7px;
  margin-bottom: 11px;
}

.seed-provenance li {
  display: grid;
  gap: 2px;
  padding-left: 9px;
  border-left: 1px solid rgba(179,143,77,0.42);
}

.seed-provenance li a,
.seed-provenance li strong {
  width: fit-content;
  color: var(--milk);
  font-family: var(--serif);
  font-size: 12.5px;
  line-height: 1.5;
  font-weight: 400;
}

.seed-provenance li a {
  text-decoration: underline;
  text-decoration-color: rgba(179,143,77,0.45);
  text-underline-offset: 3px;
}

.seed-provenance li a:hover { color: var(--brass); text-decoration-color: var(--brass); }

.seed-provenance li span {
  color: var(--milk-dim);
  font-size: 9.5px;
  line-height: 1.45;
}

.seed-transform {
  color: var(--milk-dim);
  font-size: 11px;
  line-height: 1.75;
}

.seed-source-missing { color: var(--rust) !important; }

.seed-actions {
  display: flex;
  gap: 4px;
  margin-top: 10px;
  align-items: center;
}

.seed-keep, .seed-start {
  border: 1px solid var(--rust);
  color: var(--paper);
  background: var(--rust-deep);
  padding: 5px 18px;
  font-size: 13px;
  letter-spacing: 0.12em;
  border-radius: 1px;
  min-height: 38px;
}

.seed-keep:hover, .seed-start:hover { background: var(--rust); }

.seed-pass, .seed-return {
  color: var(--milk-dim);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  padding: 5px 14px;
  min-height: 38px;
}

.seed-pass:hover, .seed-return:hover { color: var(--milk); text-decoration: underline; text-underline-offset: 3px; }

.seed-empty {
  font-size: 12.5px;
  color: var(--milk-dim);
  border: 1px dashed var(--line-dark);
  padding: 18px;
  line-height: 1.9;
}

/* 拾ったアイデアは本人の側＝紙になる */
.seed-kept { display: grid; gap: 10px; margin-bottom: 14px; }

.seed-chip {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid rgba(0,0,0,0.55);
  border-radius: 1px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.4);
  padding: 12px 16px 8px;
}

.seed-chip-text {
  font-family: var(--serif);
  font-size: 14.5px;
  line-height: 1.8;
}

.seed-chip .seed-start {
  border-color: var(--rust);
  background: transparent;
  color: var(--rust-deep);
}

.seed-chip .seed-start:hover { background: var(--rust-deep); color: var(--paper); }

.seed-chip .seed-return { color: var(--ink-soft); }
.seed-chip .seed-return:hover { color: var(--ink); }

.seed-chip .seed-provenance { border-color: rgba(0,0,0,0.2); }
.seed-chip .seed-provenance-body { border-color: rgba(0,0,0,0.18); }
.seed-chip .seed-provenance summary { color: var(--rust-deep); }
.seed-chip .seed-provenance summary::after,
.seed-chip .seed-provenance li span,
.seed-chip .seed-transform { color: var(--ink-soft); }
.seed-chip .seed-provenance li a,
.seed-chip .seed-provenance li strong { color: var(--ink); }
.seed-chip .seed-provenance-label,
.seed-chip .seed-transform span { color: var(--rust-deep); }

.scrapbook-rail .seed-kept { gap: 12px; margin-bottom: 12px; }

.rail-heading {
  color: var(--ink-soft);
  font-size: 10px;
  letter-spacing: 0.13em;
  margin: 0 0 -3px;
}

.scrapbook-rail-empty {
  color: var(--ink-soft);
  font-family: var(--serif);
  font-size: 12.5px;
  line-height: 1.85;
  padding: 2px 0 8px;
}

.scrapbook-clip { position: relative; }
.scrapbook-clip:nth-of-type(2n) { transform: rotate(0.25deg); }
.scrapbook-clip:nth-of-type(3n) { transform: rotate(-0.18deg); }

.scrapbook-clip-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.scrapbook-clip .seed-recipe {
  color: var(--rust-deep);
  margin-bottom: 8px;
}

.scrapbook-clip h4 {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  margin: -1px 0 7px;
}

.scrapbook-select {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 4px;
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 9px;
  line-height: 1.4;
  white-space: nowrap;
}

.scrapbook-select input { accent-color: var(--rust-deep); }

.scrapbook-built {
  border-top: 3px double var(--rust-deep);
  background: #f4ecdc;
}

.scrapbook-builder {
  margin-top: 17px;
  padding-top: 15px;
  border-top: 1px solid rgba(0,0,0,0.3);
}

.scrapbook-builder-head { margin-bottom: 9px; }
.scrapbook-build-status {
  color: var(--ink-soft);
  font-size: 10.5px;
  line-height: 1.65;
  margin: 8px 0 9px;
}

.scrapbook-materials {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 24px;
  margin: 0 0 11px;
}

.scrapbook-materials span {
  border: 1px solid rgba(143,62,30,0.55);
  color: var(--rust-deep);
  font-family: var(--serif);
  font-size: 10.5px;
  line-height: 1.4;
  padding: 3px 6px;
}

.scrapbook-materials .scrapbook-materials-empty {
  border-color: rgba(0,0,0,0.18);
  color: var(--ink-soft);
}

.scrapbook-builder label {
  display: block;
  color: var(--ink-soft);
  font-size: 10.5px;
  line-height: 1.55;
  margin-bottom: 5px;
}

.scrapbook-builder textarea {
  display: block;
  width: 100%;
  resize: vertical;
  background: rgba(255,255,255,0.27);
  border: 1px solid rgba(0,0,0,0.3);
  border-radius: 0;
  color: var(--ink);
  line-height: 1.65;
  padding: 8px 9px;
}

.scrapbook-builder textarea:focus { outline: none; border-color: var(--rust-deep); }

.scrapbook-builder .seed-start {
  display: block;
  width: 100%;
  margin-top: 9px;
}

.scrapbook-builder .seed-start[disabled] {
  border-color: rgba(0,0,0,0.22);
  background: transparent;
  color: var(--ink-soft);
  cursor: not-allowed;
}

/* 保存済みのページは、作業中の紙面から必要な時だけめくる。 */
.scrapbook-board-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.scrapbook-pages-toggle,
.scrapbook-pages-close {
  border: 1px solid rgba(75, 51, 31, 0.62);
  border-radius: 0;
  color: var(--ink);
  font-family: var(--serif);
  letter-spacing: 0.05em;
}

.scrapbook-pages-toggle {
  min-height: 28px;
  padding: 4px 7px 4px 9px;
  background: rgba(179,143,77,0.15);
  font-size: 10px;
}

.scrapbook-pages-toggle:hover,
.scrapbook-pages-toggle:focus-visible {
  background: rgba(168,75,38,0.15);
  border-color: var(--rust-deep);
  outline: none;
}

.scrapbook-pages-toggle[aria-expanded="true"] {
  background: #4b3324;
  border-color: #4b3324;
  color: var(--paper-2);
}

#scrapbook-saved-count {
  display: inline-block;
  min-width: 1.55em;
  margin-left: 4px;
  color: var(--rust-deep);
  font-size: 11px;
  text-align: center;
}

.scrapbook-pages-toggle[aria-expanded="true"] #scrapbook-saved-count { color: #ead9b7; }

.scrapbook-page-picker {
  margin: 0 2px 14px;
  padding: 12px 13px 13px;
  border: 1px solid rgba(31,22,15,0.76);
  border-top: 4px solid #816143;
  background:
    linear-gradient(90deg, rgba(179,143,77,0.1), transparent 36%),
    #252019;
  box-shadow: 3px 4px 0 rgba(42,28,16,0.2);
  color: var(--milk);
}

.scrapbook-page-picker[hidden] { display: none; }

.scrapbook-page-picker-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.scrapbook-page-picker-head h4 {
  color: var(--milk);
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.3;
}

.scrapbook-pages-close {
  min-height: 26px;
  padding: 3px 8px;
  background: transparent;
  color: var(--milk-dim);
  font-size: 9.5px;
}

.scrapbook-pages-close:hover,
.scrapbook-pages-close:focus-visible { border-color: var(--brass); color: var(--milk); outline: none; }

.scrapbook-page-picker-note {
  margin: 5px 0 10px;
  color: var(--milk-dim);
  font-size: 10px;
  line-height: 1.55;
}

.scrapbook-page-picker .scrapbook-session-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  max-height: min(43vh, 350px);
  overflow-y: auto;
  padding: 2px;
  scrollbar-color: rgba(179,143,77,0.5) transparent;
}

.scrapbook-page-picker .scrapbook-session {
  --tab-paper: #d8c88c;
  position: relative;
  display: flex;
  align-items: stretch;
  min-width: 0;
  padding: 0;
  border: 1px solid rgba(8,7,6,0.82);
  border-left: 4px solid var(--tab-paper);
  background: #31291f;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.15);
}

.scrapbook-page-picker .scrapbook-session:nth-child(4n + 2) { --tab-paper: #c9b48c; }
.scrapbook-page-picker .scrapbook-session:nth-child(4n + 3) { --tab-paper: #ae9278; }
.scrapbook-page-picker .scrapbook-session:nth-child(4n) { --tab-paper: #a6b1a0; }

.scrapbook-page-picker .scrapbook-session.is-active {
  border-color: var(--brass);
  background: #3c3226;
}

.scrapbook-page-picker .scrapbook-page-open {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  align-items: center;
  width: 100%;
  min-width: 0;
  padding: 8px 5px 8px 7px;
  background: transparent;
  color: var(--milk);
  text-align: left;
}

.scrapbook-page-picker .scrapbook-page-open:hover,
.scrapbook-page-picker .scrapbook-page-open:focus-visible { background: rgba(255,255,255,0.05); outline: none; }

.scrapbook-page-picker .scrapbook-page-number {
  color: var(--tab-paper);
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: 0.05em;
}

.scrapbook-page-tab-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.scrapbook-page-picker .scrapbook-page-tab-copy strong {
  overflow: hidden;
  color: var(--milk);
  font-family: var(--serif);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scrapbook-page-picker .scrapbook-page-tab-copy small {
  overflow: hidden;
  color: var(--milk-dim);
  font-size: 8px;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scrapbook-page-picker .scrapbook-page-delete {
  align-self: stretch;
  width: 26px;
  flex: 0 0 26px;
  color: rgba(240,231,214,0.5);
  font-size: 16px;
  line-height: 1;
}

.scrapbook-page-picker .scrapbook-page-delete:hover,
.scrapbook-page-picker .scrapbook-page-delete:focus-visible { color: var(--rust); outline: none; }

.scrapbook-page-picker .scrapbook-sessions-empty {
  padding: 7px 3px;
}

/* スクラップブック: 画面では「右に貼る」ことが主役になる、3列×4段の紙面。 */
.scrapbook-page-controls {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1.25fr);
  align-items: end;
  gap: 14px 18px;
  max-width: 100%;
  margin: 0 0 22px;
  padding: 13px 15px 12px 19px;
  border: 1px solid var(--line-dark);
  border-left: 4px double rgba(179,143,77,0.7);
  background: rgba(255,255,255,0.025);
}

.scrapbook-page-controls label {
  display: grid;
  gap: 3px;
  color: var(--milk-dim);
  font-size: 10px;
  letter-spacing: 0.13em;
}

.scrapbook-page-controls input {
  width: 100%;
  min-height: 34px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--brass);
  border-radius: 0;
  color: var(--milk);
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: 0.04em;
  padding: 3px 1px 5px;
}

.scrapbook-page-controls input:focus { outline: none; border-bottom-color: var(--rust); }

.scrapbook-page-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.scrapbook-page-actions .seed-start,
.scrapbook-page-actions .seed-return { white-space: nowrap; }

#scrapbook-save-status {
  color: var(--milk-dim);
  font-size: 10.5px;
  line-height: 1.6;
  padding-bottom: 5px;
}

.scrapbook-workspace {
  grid-template-columns: minmax(285px, 0.7fr) minmax(700px, 1.3fr);
  gap: 26px;
}

.scrapbook-deck {
  position: sticky;
  top: 64px;
  padding: 13px 0 18px;
}

.scrapbook-book {
  position: relative;
  min-width: 0;
  padding: 10px 9px 15px 38px;
  background: linear-gradient(90deg, #3f3023 0 34px, transparent 34px);
}

.scrapbook-book::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 15px;
  right: 0;
  bottom: 7px;
  left: 44px;
  border-right: 7px solid #b9ad98;
  border-bottom: 7px solid #b9ad98;
  box-shadow: 7px 8px 0 rgba(0,0,0,0.22);
}

.scrapbook-book-spine {
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 43px;
  color: rgba(245,231,199,0.78);
  background:
    linear-gradient(90deg, rgba(255,255,255,0.13), transparent 22%, transparent 78%, rgba(0,0,0,0.36)),
    #543a29;
  border-right: 1px solid rgba(20,13,8,0.72);
  box-shadow: inset -3px 0 5px rgba(0,0,0,0.24), 3px 0 3px rgba(0,0,0,0.2);
}

.scrapbook-book-spine::before {
  content: "";
  position: absolute;
  inset: 20px 9px;
  background: repeating-linear-gradient(0deg, transparent 0 22px, rgba(232,211,163,0.44) 22px 24px, transparent 24px 45px);
}

.scrapbook-book-spine span {
  position: relative;
  font-family: var(--serif);
  font-size: 10px;
  letter-spacing: 0.2em;
  writing-mode: vertical-rl;
}

.scrapbook-board-pane {
  position: relative;
  z-index: 1;
  min-width: 0;
  background:
    linear-gradient(90deg, rgba(91,66,42,0.12), transparent 42px),
    repeating-linear-gradient(0deg, rgba(116,97,68,0.035) 0 1px, transparent 1px 5px),
    var(--paper-2);
  color: var(--ink);
  border: 1px solid rgba(0,0,0,0.58);
  box-shadow: inset 13px 0 17px rgba(73,49,30,0.08), 2px 2px 0 rgba(0,0,0,0.12);
  padding: 21px 23px 25px 49px;
}

.scrapbook-board-pane::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 29px;
  bottom: 29px;
  left: 16px;
  width: 17px;
  border-right: 1px solid rgba(77,54,34,0.26);
  background: radial-gradient(circle, rgba(70,49,31,0.42) 0 3px, transparent 3.5px) center top / 17px 38px repeat-y;
  opacity: 0.64;
  pointer-events: none;
}

.scrapbook-board-pane > * { position: relative; z-index: 1; }

.scrapbook-board-pane::after {
  content: "";
  position: absolute;
  top: 0;
  right: 11px;
  bottom: 0;
  width: 1px;
  background: rgba(80,54,34,0.14);
  pointer-events: none;
}

.scrapbook-board-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 12px;
  padding: 0 2px 12px;
  border-bottom: 1px solid rgba(0,0,0,0.25);
}

.scrapbook-board-head h3,
.scrapbook-pages h3 {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.3;
}

#scrapbook-board-count {
  color: var(--rust-deep);
  font-family: var(--serif);
  font-size: 12px;
  white-space: nowrap;
}

.scrapbook-board {
  position: relative;
  margin: 13px 0 15px;
  padding: 13px;
  border: 1px solid rgba(43,38,32,0.36);
  background-color: #e1d2b7;
  background-image: repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 30px,
    rgba(95,78,50,0.08) 30px,
    rgba(95,78,50,0.08) 31px
  );
  box-shadow: inset 0 0 0 3px rgba(255,255,255,0.28), 0 1px 3px rgba(43,38,32,0.14);
  transition: border-color 140ms ease, background-color 140ms ease;
}

.scrapbook-board::before {
  content: "DRAG A CARD HERE";
  position: absolute;
  right: 16px;
  top: 8px;
  color: rgba(43,38,32,0.3);
  font-size: 8px;
  letter-spacing: 0.18em;
}

.scrapbook-board.is-dragover {
  background-color: #e7bf8d;
  border-color: var(--rust-deep);
}

.scrapbook-board-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(174px, auto);
  gap: 12px;
  margin: 0;
}

.scrapbook-slot {
  display: grid;
  place-content: center;
  min-height: 174px;
  border: 1px dashed rgba(43,38,32,0.26);
  color: rgba(43,38,32,0.42);
  text-align: center;
}

.scrapbook-slot span {
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: 0.12em;
}

.scrapbook-slot p { font-size: 10px; margin-top: 2px; }

.scrapbook-board-grid .scrapbook-clip {
  min-width: 0;
  min-height: 174px;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: 1px 3px 5px rgba(43,38,32,0.27);
  padding: 13px 12px 9px;
  transform: rotate(var(--scrap-tilt, -0.45deg));
}

.scrapbook-board-grid .scrapbook-clip:nth-of-type(2n) { --scrap-tilt: 0.42deg; }
.scrapbook-board-grid .scrapbook-clip:nth-of-type(3n) { --scrap-tilt: -0.22deg; }

.sticky-note::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 31%;
  top: -6px;
  width: 38%;
  height: 12px;
  background: rgba(235,220,177,0.68);
  box-shadow: 0 1px 1px rgba(43,38,32,0.11);
  transform: rotate(-2deg);
}

.sticky-note-amber { background: #f3dc94; }
.sticky-note-rose { background: #efc7bd; }
.sticky-note-moss { background: #ced9ae; }
.sticky-note-blue { background: #bfd6df; }
.scrapbook-board-grid .scrapbook-built { background: #f2c58d; border-top: 3px double var(--rust-deep); }

@keyframes scrapbook-stick {
  0% { opacity: 0; transform: translateY(-28px) rotate(5deg) scale(1.09); }
  62% { opacity: 1; transform: translateY(3px) rotate(var(--scrap-tilt, -0.45deg)) scale(0.985); }
  100% { opacity: 1; transform: translateY(0) rotate(var(--scrap-tilt, -0.45deg)) scale(1); }
}

.scrapbook-board-grid .scrapbook-clip.is-new { animation: scrapbook-stick 640ms cubic-bezier(.18,.74,.31,1) both; }

.scrapbook-board-grid .seed-recipe {
  color: rgba(43,38,32,0.67);
  font-size: 8.5px;
  line-height: 1.35;
  letter-spacing: 0.13em;
  margin-bottom: 5px;
}

.scrapbook-board-grid .seed-chip-text {
  color: var(--ink);
  font-size: 12.5px;
  line-height: 1.62;
}

.scrapbook-board-grid .scrapbook-select {
  color: rgba(43,38,32,0.74);
  font-size: 8px;
}

.scrapbook-card-text {
  display: grid;
  gap: 2px;
  margin-top: 5px;
}

.scrapbook-card-text > span {
  color: rgba(43,38,32,0.62);
  font-size: 8.5px;
  letter-spacing: 0.14em;
}

.scrapbook-card-text textarea {
  width: 100%;
  /* 種火は最長62字。付箋の幅ではおよそ5行になるので、スクロールせずに全文が見える
     高さを取る。読むために貼るものなので、隠れているとページの意味がなくなる。 */
  min-height: 112px;
  resize: vertical;
  background: rgba(255,255,255,0.16);
  border: 0;
  border-bottom: 1px dashed rgba(43,38,32,0.38);
  border-radius: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 12.5px;
  line-height: 1.62;
  padding: 2px 1px 4px;
}

.scrapbook-card-text textarea:focus {
  outline: 1px solid rgba(143,62,30,0.52);
  outline-offset: 2px;
  border-bottom-color: var(--rust-deep);
}

.scrapbook-card-note {
  display: grid;
  gap: 2px;
  margin-top: 8px;
}

.scrapbook-card-note > span {
  color: rgba(43,38,32,0.62);
  font-size: 8.5px;
  letter-spacing: 0.14em;
}

.scrapbook-card-note textarea {
  width: 100%;
  min-height: 42px;
  resize: vertical;
  background: rgba(255,255,255,0.27);
  border: 1px solid rgba(43,38,32,0.28);
  border-radius: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 11px;
  line-height: 1.45;
  padding: 4px 5px;
}

.scrapbook-card-note textarea:focus { outline: none; border-color: var(--rust-deep); }

.scrapbook-board-grid .seed-provenance {
  margin-top: 7px;
  border-color: rgba(43,38,32,0.23);
}

.scrapbook-board-grid .seed-provenance summary {
  color: var(--ink-soft);
  font-size: 8.5px;
  padding: 5px 16px 5px 0;
}

.scrapbook-board-grid .seed-actions {
  align-items: stretch;
  flex-wrap: wrap;
  gap: 2px;
  margin-top: 6px;
}

.scrapbook-board-grid .seed-start,
.scrapbook-board-grid .seed-return {
  min-height: 28px;
  padding: 3px 6px;
  font-size: 9.5px;
  letter-spacing: 0.04em;
}

.scrapbook-board-grid .seed-return { color: var(--ink-soft); }

.scrapbook-page-note {
  display: grid;
  gap: 4px;
  margin-top: 3px;
}

.scrapbook-page-note > span {
  color: var(--ink-soft);
  font-size: 10px;
  letter-spacing: 0.13em;
}

.scrapbook-page-note textarea {
  width: 100%;
  resize: vertical;
  background: rgba(255,255,255,0.28);
  border: 1px solid rgba(43,38,32,0.32);
  border-radius: 0;
  color: var(--ink);
  font-family: var(--serif);
  line-height: 1.65;
  padding: 8px 9px;
}

.scrapbook-page-note textarea:focus { outline: none; border-color: var(--rust-deep); }

.scrapbook-board-pane .scrapbook-builder { margin-top: 15px; }

.scrapbook-pages {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--line-dark);
}

.scrapbook-pages header {
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr);
  gap: 1px 14px;
  align-items: baseline;
  margin-bottom: 12px;
}

.scrapbook-pages header .scrapbook-kicker { grid-row: 1 / span 2; }

.scrapbook-pages header h3 {
  color: var(--milk);
  font-size: 16px;
}

.scrapbook-pages header > p:last-child {
  color: var(--milk-dim);
  font-size: 10.5px;
  line-height: 1.55;
}

.scrapbook-session-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.scrapbook-session {
  border: 1px solid var(--line-dark);
  background: rgba(255,255,255,0.025);
  padding: 11px 12px 9px;
}

.scrapbook-session.is-active { border-color: rgba(156,130,63,0.75); }

.scrapbook-session > p:first-child {
  color: var(--brass);
  font-size: 8.5px;
  letter-spacing: 0.08em;
}

.scrapbook-session h4 {
  color: var(--milk);
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  margin: 3px 0 5px;
}

.scrapbook-session-note {
  color: var(--milk-dim);
  display: -webkit-box;
  font-size: 10.5px;
  line-height: 1.55;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.scrapbook-session .seed-actions { margin-top: 7px; }
.scrapbook-session .seed-start,
.scrapbook-session .seed-return { min-height: 30px; padding: 3px 7px; font-size: 10px; }

.scrapbook-sessions-empty {
  color: var(--milk-dim);
  font-family: var(--serif);
  font-size: 12px;
  padding: 12px 0;
}

.seeds-note {
  margin-top: 16px;
  font-size: 11px;
  color: rgba(240,231,214,0.38);
  line-height: 1.9;
}

/* 横幅を使える画面では12枚を一枚の紙面として保ち、狭くなる時だけ段を増やす。 */
@media (max-width: 1099px) {
  .scrapbook-workspace { grid-template-columns: 1fr; }
  .scrapbook-deck { position: static; padding-top: 4px; }
}

@media (max-width: 720px) {
  .scrapbook-page-controls { grid-template-columns: 1fr auto; }
  #scrapbook-save-status { grid-column: 1 / -1; padding-bottom: 0; }
  .scrapbook-page-picker .scrapbook-session-list { grid-template-columns: 1fr; }
  .scrapbook-board { padding: 10px; }
  .scrapbook-board-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(168px, auto);
  }
}

@media (max-width: 560px) {
  .scrapbook-page-controls { grid-template-columns: 1fr; }
  /* .scrapbook-page-actions は保存・書き出し・読み込みのボタン5つ+隠しinputを
     nowrapのflexで並べており、grid内の1fr列がその最小内容幅（500px近く）まで
     広がって画面からはみ出していた（2026-08-18 発見）。折り返して幅を明け渡す。 */
  .scrapbook-page-controls > * { min-width: 0; }
  .scrapbook-page-actions { width: 100%; flex-wrap: wrap; row-gap: 8px; }
  .scrapbook-page-actions button { flex: 1 1 auto; min-width: 0; }
  .scrapbook-board-tools { gap: 5px; }
  .scrapbook-pages-toggle { padding-left: 7px; padding-right: 6px; }
}

/* ============ 場面問答 ============ */

.mondo {
  margin-top: 64px;
  border-top: 1px solid var(--line-dark);
  padding-top: 28px;
}

.mondo-map {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 5px;
  margin-bottom: 10px;
}

.mondo-map button {
  min-height: 32px;
  border: 1px solid var(--line-dark);
  color: var(--milk-dim);
  font-size: 10px;
  letter-spacing: 0.12em;
}

.mondo-map button:hover {
  color: var(--milk);
  border-color: var(--brass);
}

.mondo-map button[aria-pressed="true"] {
  color: var(--milk);
  background: rgba(154,60,43,0.22);
  border-color: var(--rust);
}

.mondo-q {
  background: var(--desk-2);
  border: 1px solid var(--line-dark);
  border-radius: 1px;
  padding: 20px 22px 16px;
}

.mondo-type {
  font-size: 10.5px;
  letter-spacing: 0.2em;
  color: var(--slate);
  margin-bottom: 10px;
}

.mondo-title {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--milk);
  margin-bottom: 10px;
}

.mondo-situation {
  font-size: 14px;
  line-height: 1.95;
  color: var(--milk);
}

.mondo-q .constraints { margin-top: 14px; }

.mondo-basis {
  margin-top: 14px;
  padding: 10px 12px;
  border-left: 3px solid var(--brass);
  background: rgba(179,143,77,0.08);
  color: rgba(240,231,214,0.78);
  font-size: 11.5px;
  line-height: 1.7;
}

.mondo-basis span {
  display: block;
  color: var(--brass);
  font-size: 9px;
  letter-spacing: 0.18em;
  margin-bottom: 2px;
}

/* 暗い側のチップ（出題は資料側なので紙チップと分ける） */
.chip-dark {
  font-size: 12px;
  letter-spacing: 0.04em;
  border: 1px solid var(--line-dark);
  color: var(--milk);
  padding: 3px 10px;
  border-radius: 1px;
  background: rgba(0,0,0,0.25);
}

.chip-dark.hard { border-left: 3px solid var(--rust); }
.chip-dark.conflict { border-left: 3px solid var(--slate); }
.chip-dark .k { font-size: 10px; color: var(--milk-dim); margin-left: 6px; }

.mondo-assumption {
  margin-top: 12px;
  font-size: 11px;
  color: var(--milk-dim);
  border-top: 1px dashed var(--line-dark);
  padding-top: 10px;
}

/* 自分の答え = 紙の側 */
.mondo-answer, .mondo-compare {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid rgba(0,0,0,0.55);
  border-radius: 1px;
  box-shadow: 0 2px 0 rgba(0,0,0,0.45);
  padding: 18px 20px 16px;
  margin-top: 14px;
}

.mondo-answer-label {
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--rust);
  margin-bottom: 12px;
}

.mondo-field { display: block; margin-bottom: 10px; }

.mondo-field span {
  display: block;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin-bottom: 2px;
}

.mondo-field textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--paper-line);
  color: var(--ink);
  padding: 4px 2px 8px;
  resize: vertical;
  min-height: 34px;
  line-height: 1.7;
  font-size: 14px;
}

.mondo-field textarea:focus { outline: none; border-bottom-color: var(--brass); }

.mondo-answer .seed-keep[disabled] {
  background: transparent;
  border-color: var(--paper-line);
  color: var(--ink-soft);
  cursor: default;
}

.mondo-answer .seed-pass { color: var(--ink-soft); }
.mondo-answer .seed-pass:hover { color: var(--ink); }

/* 参照実例 = 暗い側 */
.mondo-sols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.mondo-sol {
  background: var(--desk-2);
  border: 1px solid var(--line-dark);
  border-radius: 1px;
  padding: 14px 16px 8px;
}

.mondo-sol-label {
  font-size: 10.5px;
  letter-spacing: 0.25em;
  color: var(--brass);
  margin-bottom: 10px;
}

.mondo-sol-rows, .mondo-sol-more { display: grid; gap: 7px; }
.mondo-sol-more { margin-top: 7px; }

.mondo-sol .vm {
  display: grid;
  grid-template-columns: 6.5em 1fr;
  gap: 10px;
  font-size: 12.5px;
  color: var(--milk);
  line-height: 1.7;
}

.mondo-sol .vm b {
  font-weight: normal;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--milk-dim);
  padding-top: 2px;
}

.mondo-source-work {
  color: var(--milk);
  text-decoration: none;
  border-bottom: 1px solid rgba(179,143,77,0.42);
  padding-bottom: 3px;
}

.mondo-source-work span {
  display: block;
  color: var(--brass);
  font-size: 10px;
  letter-spacing: 0.08em;
  margin-top: 3px;
}

.mondo-source-work:hover {
  color: var(--brass);
  border-bottom-color: var(--brass);
}

.mondo-recon {
  font-size: 11px;
  color: var(--rust-deep);
  border-top: 1px dashed var(--line-dark);
  padding-top: 8px;
}

.mondo-recon.ok { color: var(--moss); }

.mondo-compare .save-note-dark, .save-note-dark {
  font-size: 10.5px;
  color: var(--ink-soft);
  margin-top: 8px;
}

/* ============ 制作机（スタジオ） ============ */

#view-studio { padding-left: 44px; }

.studio-topbar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line-dark);
  flex-wrap: wrap;
}

.btn-back {
  color: var(--milk-dim);
  letter-spacing: 0.08em;
  font-size: 13px;
  padding: 4px 8px;
}

.btn-back:hover { color: var(--milk); }

.studio-title {
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: 0.1em;
  color: var(--milk);
  flex: 1;
  min-width: 0;
}

.studio-title small {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--milk-dim);
  margin-left: 10px;
  letter-spacing: 0.06em;
}

.btn-shelf {
  border: 1px solid var(--line-dark);
  color: var(--milk);
  padding: 6px 18px;
  letter-spacing: 0.12em;
  font-size: 13px;
  border-radius: 1px;
}

.btn-shelf:hover { border-color: var(--brass); }

.phase-note {
  width: 100%;
  font-size: 11px;
  color: rgba(240,231,214,0.35);
  letter-spacing: 0.05em;
}

/* 本体グリッド */
.studio-grid {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 300px;
  gap: 20px;
  padding: 20px;
  align-items: start;
  max-width: 1520px;
  margin: 0 auto;
}

/* ---- 左: 置いた資料（暗い側） ---- */

.rail { min-width: 0; }

.rail-heading {
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--milk-dim);
  margin-bottom: 12px;
  padding-left: 2px;
}

.placed-list { display: flex; flex-direction: column; gap: 10px; }

.placed-card {
  background: var(--desk-2);
  border: 1px solid var(--line-dark);
  border-radius: 1px;
  padding: 12px 14px;
}

.placed-card .t {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--milk);
  line-height: 1.5;
}

.placed-card .m {
  font-size: 11px;
  color: var(--milk-dim);
  margin-top: 2px;
}

.placed-card .axis-tag {
  display: inline-block;
  margin-top: 8px;
  font-size: 11px;
  color: var(--slate);
  border: 1px solid rgba(139,152,161,0.35);
  padding: 1px 8px;
  border-radius: 1px;
  letter-spacing: 0.05em;
}

.placed-note {
  font-size: 12px;
  color: var(--milk);
  line-height: 1.65;
  margin-top: 8px;
}

.placed-note.empty {
  color: rgba(240,231,214,0.42);
}

.placed-card .row {
  display: flex;
  gap: 4px;
  margin-top: 8px;
}

.link-btn {
  font-size: 12px;
  color: var(--milk-dim);
  letter-spacing: 0.06em;
  padding: 6px 8px 6px 0;
  min-height: 34px;
}

.link-btn:hover { color: var(--milk); text-decoration: underline; text-underline-offset: 3px; }

.placed-empty {
  font-size: 12px;
  color: var(--milk-dim);
  line-height: 1.8;
  border: 1px dashed var(--line-dark);
  padding: 14px;
}

.shelf-context {
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.8;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--paper-line);
  padding-bottom: 12px;
}

.shelf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}

.shelf-chip {
  border: 1px solid var(--paper-line);
  color: var(--ink-soft);
  padding: 4px 9px;
  font-size: 12px;
}

.shelf-chip[aria-pressed="true"] {
  color: var(--rust);
  border-color: var(--rust);
}

.shelf-count,
.shelf-summary {
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.7;
}

.shelf-place-editor {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--paper-line);
}

.shelf-role {
  display: flex;
  gap: 14px;
  font-size: 12px;
  color: var(--ink-soft);
}

.shelf-role input {
  accent-color: var(--rust);
  margin-right: 4px;
}

.evidence-note {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--paper-line);
  color: var(--milk);
  line-height: 1.7;
  resize: vertical;
}

.evidence-note:focus {
  outline: none;
  border-bottom-color: var(--rust);
}

.db-status {
  font-size: 12px;
}

/* ---- 中央: 紙（本人の制作の側） ---- */

.sheet {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid rgba(0,0,0,0.55);
  border-radius: 1px;
  box-shadow: 0 2px 0 rgba(0,0,0,0.45);
  padding: 34px 40px 40px;
}

.sheet-write {
  float: right;
  color: var(--rust);
  border-bottom: 1px solid var(--rust);
  padding-bottom: 1px;
  font-size: 12px;
  letter-spacing: 0.1em;
}

.sheet-top-actions {
  float: right;
  display: flex;
  gap: 14px;
  align-items: center;
}

.sheet-top-actions .sheet-write {
  float: none;
}

.sheet-editor {
  clear: both;
}

.sheet-field {
  display: block;
  margin-top: 14px;
}

.sheet-field > span,
.sheet-row-field > span {
  display: block;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--ink-soft);
  margin-bottom: 5px;
}

.sheet-field input,
.sheet-field textarea,
.sheet-field select,
.sheet-row-field textarea,
.constraint-row input[type="text"] {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--paper-line);
  color: var(--ink);
  padding: 6px 2px 8px;
  line-height: 1.7;
}

.sheet-field textarea,
.sheet-row-field textarea {
  resize: vertical;
}

.sheet-field input:focus,
.sheet-field textarea:focus,
.sheet-field select:focus,
.sheet-row-field textarea:focus,
.constraint-row input[type="text"]:focus {
  outline: none;
  border-bottom-color: var(--rust);
}

.sheet-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.sheet-fixed-rows {
  display: grid;
  gap: 9px;
  margin-top: 14px;
}

.sheet-row-field {
  display: grid;
  grid-template-columns: 7em 1fr;
  gap: 12px;
  align-items: start;
}

.sheet-row-field > span {
  padding-top: 8px;
}

.sheet-row-field.born > span {
  color: var(--rust);
}

.constraint-editor {
  display: grid;
  gap: 8px;
}

.constraint-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: end;
}

.constraint-row label {
  color: var(--ink-soft);
  font-size: 12px;
  white-space: nowrap;
}

.constraint-row input[type="checkbox"] {
  accent-color: var(--rust);
  margin-right: 4px;
}

.constraint-row button,
.sheet-small-button,
.sheet-save,
.sheet-cancel {
  color: var(--ink-soft);
  border-bottom: 1px solid var(--paper-line);
  padding-bottom: 1px;
  font-size: 12px;
}

.constraint-row button:hover,
.sheet-small-button:hover,
.sheet-save:hover,
.sheet-cancel:hover {
  color: var(--rust);
  border-bottom-color: var(--rust);
}

.sheet-small-button {
  margin-top: 12px;
}

.sheet-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 18px;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--paper-line);
}

.scene-line {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(19px, 2.4vw, 25px);
  line-height: 1.75;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.scene-line-label {
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--rust);
  display: block;
  margin-bottom: 8px;
}

/* 問いの変化: 以前 → 現在（一行のみ・履歴は展開式の想定） */
.question-shift {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--paper-line);
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.8;
}

.question-shift .arrow { color: var(--rust); padding: 0 6px; }
.question-shift .now { color: var(--ink); }

.branch-origin-line {
  margin-top: 8px;
  font-size: 12px;
  color: var(--slate);
  line-height: 1.7;
}

.branch-origin-line button {
  color: var(--slate);
  border-bottom: 1px solid var(--paper-line);
}

.branch-origin-line button:hover {
  color: var(--rust);
  border-bottom-color: var(--rust);
}

.branch-origin-line small {
  color: var(--ink-soft);
}

.branch-form {
  margin-top: 14px;
}

.branch-error {
  margin-top: 8px;
  color: var(--rust);
  font-size: 12px;
}

.desk-branch-line {
  color: var(--slate);
  font-size: 12px;
  line-height: 1.6;
  margin: 6px 0 0;
}

.question-shift .label {
  font-size: 10px;
  letter-spacing: 0.3em;
  display: block;
  color: var(--ink-soft);
  margin-bottom: 2px;
}

/* 制約ピン */
.constraints {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.chip {
  font-size: 12px;
  letter-spacing: 0.04em;
  border: 1px solid var(--paper-line);
  color: var(--ink);
  padding: 3px 10px;
  border-radius: 1px;
  background: var(--paper-2);
}

.chip.hard {
  border-left: 3px solid var(--rust);
}

.chip .k {
  font-size: 10px;
  color: var(--ink-soft);
  margin-left: 6px;
}

/* 場面スタディ本文 */
.study-section {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--paper-line);
}

.study-section > h3 {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.16em;
  margin-bottom: 10px;
  color: var(--ink);
}

.study-section > h3::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 1px;
  background: var(--brass);
  vertical-align: 4px;
  margin-right: 10px;
}

.study-section p { font-size: 14.5px; }

.entry-exit { display: grid; gap: 8px; }
.entry-exit .ee {
  display: grid;
  grid-template-columns: 3.2em 1fr;
  gap: 10px;
  font-size: 14.5px;
}
.entry-exit .ee b {
  font-weight: 600;
  color: var(--ink-soft);
  font-size: 12px;
  letter-spacing: 0.2em;
  padding-top: 3px;
}

.relations { display: grid; gap: 6px; }
.relations .rel {
  display: grid;
  grid-template-columns: 3.2em 1fr;
  gap: 10px;
  font-size: 14px;
}
.relations .rel b {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--ink-soft);
  padding-top: 2px;
}

/* 変換メモ */
.transform-memo {
  border: 1px solid var(--paper-line);
  background: var(--paper-2);
  padding: 16px 18px 14px;
  margin-top: 6px;
}

.transform-memo .from {
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--ink-soft);
  margin-bottom: 10px;
}

.transform-memo .from b { color: var(--rust); font-weight: 600; }

.transform-memo dl { display: grid; gap: 7px; }

.transform-memo .tr {
  display: grid;
  grid-template-columns: 7em 1fr;
  gap: 12px;
  font-size: 13.5px;
}

.transform-memo dt {
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  padding-top: 2px;
}

.transform-memo .tr.born dt { color: var(--rust); }
.transform-memo .tr.born dd { font-weight: 600; }

.next-action {
  border-left: 3px solid var(--rust);
  padding: 4px 0 4px 14px;
  font-size: 14.5px;
}

.muted-note {
  font-size: 11.5px;
  color: var(--ink-soft);
  margin-top: 8px;
}

.sheet .placeholder {
  color: var(--ink-soft);
  font-size: 13.5px;
  border: 1px dashed var(--paper-line);
  padding: 12px 14px;
}

/* ---- 右: 根拠（暗い側） ---- */

.evidence-panel {
  background: var(--desk-2);
  border: 1px solid var(--line-dark);
  border-radius: 1px;
  padding: 16px 18px 20px;
}

.evidence-panel h2 {
  font-size: 11px;
  font-weight: normal;
  letter-spacing: 0.3em;
  color: var(--milk-dim);
  margin-bottom: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.evidence-empty {
  font-size: 12.5px;
  color: var(--milk-dim);
  line-height: 1.9;
}

.evidence-body .work {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--milk);
  margin-bottom: 2px;
}

.evidence-body .meta {
  font-size: 11.5px;
  color: var(--milk-dim);
  margin-bottom: 14px;
}

.ev-block { margin-bottom: 14px; }

.ev-block h4 {
  font-size: 10.5px;
  font-weight: normal;
  letter-spacing: 0.25em;
  margin-bottom: 4px;
}

.ev-block p, .ev-block li {
  font-size: 13px;
  line-height: 1.8;
  color: var(--milk);
}

.ev-block ul { list-style: none; }

.ev-block.fact h4 { color: var(--brass); }
.ev-block.fact li::before { content: "▪ "; color: var(--brass); }

.ev-block.interp h4 { color: var(--slate); }

.ev-block.unverified h4 { color: var(--milk-dim); }
.ev-block.unverified p {
  border-bottom: 1px dashed rgba(240,231,214,0.35);
  display: inline;
}

.ev-block.risk h4 { color: var(--rust-deep); }
.ev-block.risk p { color: var(--milk); }

.ev-legend {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid var(--line-dark);
  font-size: 10.5px;
  color: var(--milk-dim);
  line-height: 2;
}

.btn-close-ev { display: none; }

/* ============ ビジュアルスタディ（机の暗部に置く） ============ */

.visuals {
  grid-column: 1 / -1;
  margin-top: 16px;
}

.visuals-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.visuals-head h2 {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--milk);
}

.visuals-head .hint {
  font-size: 11.5px;
  color: var(--milk-dim);
  letter-spacing: 0.05em;
}

.visual-stage-link {
  margin-left: auto;
  color: var(--brass);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-decoration: none;
  border-bottom: 1px solid rgba(156,130,63,0.45);
}

.visual-stage-link:hover {
  color: var(--paper);
  border-bottom-color: var(--paper);
}

.visual-brief {
  margin-bottom: 18px;
}

.visual-brief .transform-memo {
  margin-top: 0;
}

.visual-brief .sheet-write {
  margin-left: 16px;
}

.visual-brief .placeholder {
  color: var(--ink-soft);
  font-size: 13.5px;
}

.visual-brief-reference {
  padding-bottom: 14px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--paper-line);
}

.visual-brief-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px;
}

.visual-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  align-items: start;
}

.visual-first-look-control {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--milk-dim);
  font-size: 12px;
  border-bottom: 1px solid var(--line-dark);
  padding-bottom: 10px;
}

.visual-first-look-control input {
  accent-color: var(--rust);
  margin-right: 6px;
}

.visual-first-look-control p {
  color: var(--rust);
}

.visual-card {
  background: var(--desk-2);
  border: 1px solid var(--line-dark);
  border-radius: 1px;
  padding: 16px;
}

.visual-card .dir-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}

.visual-card .dir-row .sheet-write {
  float: none;
  margin-left: auto;
}

.visual-card .dir {
  font-family: var(--serif);
  font-size: 26px;
  color: var(--brass);
  line-height: 1;
}

.visual-card .dir-label {
  font-size: 13px;
  color: var(--milk);
  letter-spacing: 0.04em;
}

.visual-art {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid rgba(0,0,0,0.5);
  background: var(--paper);
  cursor: zoom-in;
  min-height: 0;
}

.visual-art svg { display: block; width: 100%; height: auto; }

.visual-imported-art {
  background: #000;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.visual-imported-art img,
.lb-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.visual-meta { margin-top: 12px; display: grid; gap: 8px; }

.visual-meta .vm {
  display: grid;
  grid-template-columns: 6.5em 1fr;
  gap: 10px;
  font-size: 12.5px;
  color: var(--milk);
  line-height: 1.7;
}

.visual-meta .vm b {
  font-weight: normal;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--milk-dim);
  padding-top: 2px;
}

/* 派生カード（表示のみ） */
.derived {
  margin-top: 14px;
  border-top: 1px dashed var(--line-dark);
  padding-top: 12px;
}

.derived .branch-note {
  font-size: 11.5px;
  color: var(--slate);
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.derived .branch-note::before {
  content: "└ ";
  color: var(--milk-dim);
}

.derived-inner {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 12px;
  align-items: start;
}

.derived-inner .visual-art { cursor: zoom-in; }

.derived-inner p { font-size: 12px; color: var(--milk); line-height: 1.7; }

/* 判断 */
.judge {
  margin-top: 14px;
  border-top: 1px solid var(--line-dark);
  padding-top: 12px;
}

.judge .j-label {
  font-size: 10.5px;
  letter-spacing: 0.25em;
  color: var(--milk-dim);
  margin-bottom: 8px;
}

.judge-row { display: flex; flex-wrap: wrap; gap: 6px; }

.judge-btn {
  border: 1px solid var(--line-dark);
  color: var(--milk-dim);
  font-size: 12.5px;
  padding: 6px 14px;
  letter-spacing: 0.08em;
  border-radius: 1px;
  min-height: 40px;
}

.judge-btn:hover { color: var(--milk); border-color: rgba(240,231,214,0.4); }

.judge-btn[aria-pressed="true"] {
  color: var(--paper);
  border-color: var(--rust);
  background: var(--rust-deep);
}

.judge textarea {
  width: 100%;
  margin-top: 10px;
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--line-dark);
  color: var(--milk);
  padding: 8px 10px;
  min-height: 44px;
  resize: vertical;
  font-size: 13px;
  line-height: 1.7;
}

.judge textarea::placeholder { color: rgba(240,231,214,0.3); }
.judge textarea:focus { outline: none; border-color: var(--brass); }

.judge .save-note {
  font-size: 10.5px;
  color: rgba(240,231,214,0.35);
  margin-top: 6px;
}

.visual-empty {
  border: 1px dashed var(--line-dark);
  color: var(--milk-dim);
  font-size: 12.5px;
  line-height: 1.9;
  padding: 28px 18px;
  text-align: center;
}

.visual-brief-required {
  margin-top: 14px;
  padding: 14px;
}

.visual-drop {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 190px;
  border: 1px dashed var(--line-dark);
  color: var(--milk-dim);
  font-size: 12.5px;
  line-height: 1.8;
  padding: 20px;
  text-align: center;
  cursor: pointer;
}

.visual-drop.dragging {
  border-color: var(--brass);
  color: var(--paper);
}

.visual-drop input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.visual-drop .dir {
  font-family: var(--serif);
  font-size: 28px;
  color: var(--brass);
}

.direction-editor,
.visual-import-form,
.visual-prompt-box,
.first-look-gate,
.visual-history,
.first-impression {
  margin-top: 14px;
}

.visual-prompt-box textarea {
  width: 100%;
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--line-dark);
  color: var(--milk);
  padding: 10px;
  resize: vertical;
  font-size: 12.5px;
  line-height: 1.7;
}

.visual-prompt-box textarea:focus {
  outline: none;
  border-color: var(--brass);
}

.visual-prompt-open,
.visual-remove {
  margin-top: 12px;
}

.first-look-gate {
  border-top: 1px solid var(--line-dark);
  padding-top: 12px;
}

.first-look-actions {
  display: flex;
  gap: 14px;
  justify-content: flex-end;
  margin-top: 12px;
}

.first-impression {
  color: var(--milk);
  font-size: 12.5px;
  line-height: 1.8;
  border-left: 3px solid var(--brass);
  padding-left: 10px;
}

.visual-history {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--milk-dim);
  font-size: 11.5px;
  border-top: 1px solid var(--line-dark);
  padding-top: 12px;
}

.visual-history details {
  flex-basis: 100%;
}

.visual-history summary {
  color: var(--brass);
  cursor: pointer;
}

.visual-history p {
  margin-top: 6px;
  color: var(--milk);
  white-space: pre-wrap;
}

.visual-empty .dir {
  display: block;
  font-family: var(--serif);
  font-size: 22px;
  color: rgba(240,231,214,0.3);
  margin-bottom: 6px;
}

/* ============ 資料棚ドロワー ============ */

.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 40;
}

.shelf {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(520px, 100vw);
  background: #14110e;
  border-left: 1px solid var(--line-dark);
  z-index: 41;
  display: flex;
  flex-direction: column;
}

.shelf-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line-dark);
}

.shelf-head h2 {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.3em;
  color: var(--milk);
}

.btn-close {
  width: 44px; height: 44px;
  color: var(--milk-dim);
  font-size: 18px;
  line-height: 1;
}
.btn-close:hover { color: var(--milk); }

.shelf-search {
  padding: 14px 20px 10px;
}

.shelf-search input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line-dark);
  color: var(--milk);
  padding: 6px 2px 10px;
}

.shelf-search input::placeholder { color: rgba(240,231,214,0.3); }
.shelf-search input:focus { outline: none; border-bottom-color: var(--brass); }

.shelf-search .note {
  font-size: 10.5px;
  color: rgba(240,231,214,0.35);
  margin-top: 6px;
}

.shelf-body {
  overflow-y: auto;
  padding: 6px 20px 40px;
  flex: 1;
}

.shelf-group {
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--milk-dim);
  margin: 22px 0 10px;
}

.shelf-group.contrast { color: var(--slate); }

.ref-card {
  background: var(--desk-2);
  border: 1px solid var(--line-dark);
  border-radius: 1px;
  padding: 16px 18px;
  margin-bottom: 12px;
}

.ref-card .t {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--milk);
  line-height: 1.5;
}

.ref-card .meta {
  font-size: 11.5px;
  color: var(--milk-dim);
  margin: 2px 0 10px;
}

.ref-card .meta .k-fact { color: var(--brass); }

.ref-field { margin-bottom: 8px; }

.ref-field h4 {
  font-size: 10.5px;
  font-weight: normal;
  letter-spacing: 0.2em;
  color: var(--milk-dim);
  margin-bottom: 2px;
}

.ref-field h4.interp { color: var(--slate); }
.ref-field h4.risk { color: var(--rust-deep); }

.ref-field p { font-size: 13px; color: var(--milk); line-height: 1.75; }

/* 対照軸の図示 */
.axis {
  border: 1px solid rgba(139,152,161,0.3);
  padding: 12px 14px 10px;
  margin: 10px 0;
}

.axis-name {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  color: var(--slate);
  margin-bottom: 10px;
}

.axis-line {
  display: grid;
  grid-template-columns: 1fr 44px 1fr;
  align-items: center;
  gap: 6px;
}

.axis-end {
  font-size: 12px;
  line-height: 1.5;
  color: var(--milk);
}

.axis-end em {
  display: block;
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--milk-dim);
  margin-top: 2px;
}

.axis-end.current { text-align: right; }
.axis-end.current em { color: var(--rust); }
.axis-end.opposite { text-align: left; }
.axis-end.opposite em { color: var(--slate); }

.axis-track {
  height: 1px;
  background: rgba(139,152,161,0.45);
  position: relative;
}

.axis-track::before, .axis-track::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 7px; height: 7px;
  transform: translateY(-50%);
  border-radius: 50%;
}

.axis-track::before { left: -2px; background: var(--rust); }
.axis-track::after { right: -2px; border: 1px solid var(--slate); background: transparent; }

.axis-why {
  font-size: 12px;
  color: var(--milk);
  margin-top: 10px;
  line-height: 1.7;
}

.ref-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  border-top: 1px solid var(--line-dark);
  padding-top: 10px;
}

.ref-foot .conf {
  font-size: 11px;
  color: var(--milk-dim);
  flex: 1;
}

.btn-place {
  border: 1px solid var(--rust);
  color: var(--paper);
  background: var(--rust-deep);
  padding: 7px 18px;
  font-size: 13px;
  letter-spacing: 0.1em;
  border-radius: 1px;
}

.btn-place:hover { background: var(--rust); }

.btn-place[disabled] {
  background: transparent;
  border-color: var(--line-dark);
  color: var(--moss);
  cursor: default;
}

/* ============ ライトボックス ============ */

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(10, 8, 6, 0.93);
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.lightbox .lb-art {
  width: min(880px, 92vw);
  max-height: 68vh;
  background: var(--paper);
  border: 1px solid rgba(0,0,0,0.6);
}

.lightbox .lb-art svg { display: block; width: 100%; height: auto; max-height: 68vh; }

.lb-caption {
  margin-top: 18px;
  max-width: 720px;
  text-align: center;
}

.lb-caption .d {
  font-family: var(--serif);
  color: var(--brass);
  font-size: 15px;
  letter-spacing: 0.15em;
  margin-bottom: 4px;
}

.lb-caption p { font-size: 13.5px; color: var(--milk); }

.lb-controls {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.lb-controls button {
  border: 1px solid var(--line-dark);
  color: var(--milk);
  padding: 8px 20px;
  letter-spacing: 0.1em;
  font-size: 13px;
  border-radius: 1px;
}

.lb-controls button:hover { border-color: var(--brass); }

/* ============ レスポンシブ ============ */

@media (max-width: 1119px) {
  .studio-grid { grid-template-columns: 1fr; }

  /* 画面が狭いときは、右の列も左の一列へ流し込む。
     二列に割ると、どちらの列も道具が縦に伸びて絵が押し下げられる。 */
  .stage-sketch-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "board"
      "tools"
      "inspector";
  }

  .placed-list {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .placed-card { flex: 1 1 220px; }

  /* 根拠はオーバーレイに切り替え */
  .evidence-panel {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(420px, 100vw);
    z-index: 45;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 160ms ease;
    border-left: 1px solid var(--line-dark);
    background: #14110e;
  }

  .evidence-panel.open { transform: translateX(0); }

  .btn-close-ev {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    color: var(--milk-dim);
    font-size: 16px;
  }
}

@media (max-width: 899px) {
  .scrapbook-workspace { grid-template-columns: 1fr; gap: 22px; }
  .scrapbook-rail { position: static; }

  .company-radar { padding: 22px 18px 40px; }
  .company-radar-layout { grid-template-columns: 1fr; gap: 22px; }
  .company-radar-list-pane { position: static; max-height: none; overflow: visible; padding-right: 0; }
  .company-radar-list { max-height: 46vh; overflow: auto; }

  .db-wrap {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 16px;
  }

  .db-list-pane {
    position: static;
    height: auto;
    overflow: visible;
  }

  .db-list {
    flex: none;
    min-height: 0;
    max-height: 48vh;
  }

  .db-mobile-back {
    display: inline-flex;
    position: sticky;
    top: 49px;
    z-index: 8;
    color: var(--brass);
    background: rgba(25,21,18,0.96);
    border-bottom: 1px solid rgba(179,143,77,0.45);
    font-size: 11px;
    letter-spacing: 0.08em;
    padding: 10px 4px 7px;
    margin-bottom: 8px;
  }

  .db-lens-result { grid-template-columns: 34px minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .spine { display: none; }

  .topnav { padding-left: 8px; }
  .topnav a { padding: 0 12px; font-size: 12.5px; }
  .topnav-note { display: none; }

  /* 8つのタブが幅に収まらず横スクロールになる。指で送れることが
     見た目でわからなかったので、右端（と送った後は左端も）を
     ぼかして「まだ続きがある」ことを示す（2026-08-18）。 */
  .topnav nav {
    mask-image: linear-gradient(to right, transparent, black 14px, black calc(100% - 22px), transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 14px, black calc(100% - 22px), transparent);
  }

  #view-desk { padding: 7vh 20px 56px; }
  #view-studio { padding-left: 0; }
  #view-db { padding-left: 0; }
  #view-apparatus { padding-left: 0; }
  #view-companies { padding-left: 0; }
  /* #view-roster の打ち消しは、名簿セクションがこれより後に来るため末尾に置く */

  .company-radar-head h1 { font-size: 25px; }
  .apparatus-library { padding: 22px 16px 46px; }
  .apparatus-layout { grid-template-columns: 1fr; }
  .apparatus-index { position: static; height: auto; }
  .apparatus-list { max-height: 440px; }
  .apparatus-detail { min-height: 0; scroll-margin-top: 56px; }
  .apparatus-card-head { padding: 24px 19px 20px; }
  .apparatus-card-body { padding: 8px 19px 28px; }
  .apparatus-mobile-back { display: inline-flex; margin-top: 48px; }
  .apparatus-pair { grid-template-columns: 1fr; gap: 0; }
  .apparatus-creative ul { grid-template-columns: 1fr; }
  .apparatus-card-foot { align-items: flex-start; flex-direction: column; }
  .company-radar-types { grid-template-columns: 1fr; }
  .company-dossier-work-list { grid-template-columns: 1fr; }
  .company-dossier-grid { grid-template-columns: 1fr; }
  .company-dossier-grid > section.company-dossier-wide { grid-column: auto; }
  .company-dossier-head { padding: 20px 18px 17px; }
  .company-dossier-grid > section { padding: 17px 18px; }
  #view-stage { padding: 14px 16px 56px; }
  #view-seeds, #view-mondo { padding: 8px 16px 56px; }

  .stage-sketch-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  /* スクラップブック／場面問答の見出し。flex:1 + min-width:0 の説明文が、
     見出しと右のボタンに挟まれて幅6px程度まで潰れ、1行1文字の縦書き風に
     なっていた（2026-08-18 発見）。縦積みにして説明文へ全幅を渡す。 */
  .seeds-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .seeds-head .seed-history-reset {
    align-self: flex-start;
  }

  .seeds-sub { flex: none; width: 100%; }

  .stage-history-actions { justify-content: flex-start; }
  /* 縦積みになったら、注意書きは幅いっぱいに伸ばす */
  .stage-storage-caution { flex: 1 1 auto; }

  .stage-sketch-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "board"
      "tools"
      "inspector";
  }

  .sheet { padding: 24px 20px 30px; }

  .studio-grid { padding: 14px; gap: 14px; }

  .transform-memo .tr { grid-template-columns: 1fr; gap: 2px; }
  .sheet-field-grid,
  .visual-brief-fields,
  .constraint-row,
  .sheet-row-field {
    grid-template-columns: 1fr;
  }

  .visual-grid { grid-template-columns: 1fr; }

  .paper-card { padding: 20px 18px 18px; }
  .desk-project-card { padding-right: 18px; }
  .desk-project-delete {
    position: static;
    margin-top: 12px;
  }

  .db-lens-digest-head { padding: 18px 17px 16px; }
  .db-lens-digest-title { font-size: 23px; }
  .db-lens-result { padding-right: 2px; }
  .dbd-depth-head { align-items: flex-start; flex-direction: column; gap: 2px; }
  .dbd-depth-score { text-align: left; }
  .dbd-head { padding: 20px 17px 18px; }
  .dbd-title { font-size: 23px; }
  .dbd-links a { width: 100%; justify-content: space-between; }
  .dbd-links a.utility { width: auto; }
  .mondo-map { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 430px) {
  .topnav a { padding-left: 8px; padding-right: 8px; font-size: 11.5px; }
  .apparatus-selects { grid-template-columns: 1fr; }
  .stage-history-actions { width: 100%; }
  .stage-history-actions button,
  .stage-history-actions a { flex: 1 1 auto; }
  .stage-history-actions .stage-export { flex-basis: 100%; }
  .stage-piece-buttons { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stage-piece-buttons button { font-size: 10px; }
  .seed-dealt { grid-template-columns: 1fr; }
  .scrapbook-rail { margin-left: -2px; margin-right: -2px; padding: 15px 13px; }
  .scrapbook-rail-head { align-items: baseline; }
  .scrapbook-rail-count { max-width: 9.5em; }
  .scrapbook-book { padding-left: 31px; }
  .scrapbook-book-spine { width: 34px; }
  .scrapbook-board-pane { margin-left: -2px; margin-right: -2px; padding: 15px 12px 18px 39px; }
  .scrapbook-board-pane::before { left: 12px; }
  .scrapbook-board-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(166px, auto);
  }
  .scrapbook-clip .seed-actions { align-items: stretch; flex-direction: column; }
  .scrapbook-clip .seed-start,
  .scrapbook-clip .seed-return { width: 100%; }
  .db-lens-list { grid-template-columns: 1fr; }
  .db-search { grid-template-columns: 1fr; }
  .db-search input,
  .db-search .db-count,
  .db-filter-label,
  .db-depth-guide,
  .db-filter-more,
  .db-lenses { grid-column: 1; }
  .db-filter-more > div { grid-template-columns: 1fr; }
}

/* ===== 名簿（スカウティングレポート） =====
   資料棚・制作会社と同じ2ペインの読み方を踏襲する。名簿は編集しないので、
   操作は探すことと並べ替えることに絞る。 */

/* 背表紙は position: fixed で左44pxを占める。他のビューと同じだけ本文を逃がす */
#view-roster { padding-left: 44px; }

.roster {
  max-width: 1460px;
  margin: 0 auto;
  padding: 30px 34px 48px;
}

.roster-head {
  max-width: 880px;
  padding: 2px 0 22px;
  border-bottom: 1px solid var(--line-dark);
}

.roster-kicker {
  color: var(--rust);
  font-size: 9px;
  letter-spacing: 0.24em;
  margin-bottom: 8px;
}

.roster-head h1 {
  color: var(--milk);
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(26px, 3vw, 38px);
  letter-spacing: 0.09em;
  line-height: 1.35;
}

.roster-head > p:not(.roster-kicker) {
  color: var(--milk-dim);
  max-width: 720px;
  font-size: 13px;
  line-height: 1.9;
  margin-top: 10px;
}

.roster-head .roster-boundary {
  color: rgba(240, 231, 214, 0.42);
  font-size: 10.5px;
  padding-left: 11px;
  border-left: 2px solid var(--brass);
}

/* 合言葉のゲート。鍵をかけた引き出しの手前、という程度の静けさにする */
.roster-gate {
  max-width: 560px;
  margin-top: 34px;
  padding: 26px 26px 22px;
  border: 1px solid var(--line-dark);
  background: var(--desk-2);
}

.roster-gate-form {
  display: grid;
  gap: 9px;
}

.roster-gate-form label {
  color: var(--milk-dim);
  font-size: 10px;
  letter-spacing: 0.15em;
}

.roster-pass-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
}

#roster-pass {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line-dark);
  background: var(--desk);
  color: var(--milk);
  font-family: var(--sans);
  font-size: 13px;
  padding: 9px 11px;
}

#roster-pass::placeholder { color: rgba(240, 231, 214, 0.3); }

#roster-pass-toggle { min-height: 44px; padding: 9px 14px; }

#roster-unlock {
  justify-self: start;
  min-height: 44px;
  padding: 9px 22px;
}

.roster-gate-note {
  color: var(--brass);
  font-size: 11.5px;
  line-height: 1.8;
  margin-top: 13px;
  min-height: 1.8em;
}

.roster-gate-note.is-error { color: var(--rust); }

.roster-gate-help {
  color: rgba(240, 231, 214, 0.4);
  font-size: 10.5px;
  line-height: 1.85;
  margin-top: 6px;
}

.roster-gate-help a { color: var(--brass); }

.roster-layout {
  display: grid;
  grid-template-columns: minmax(290px, 360px) minmax(0, 1fr);
  gap: 34px;
  align-items: start;
  margin-top: 24px;
}

.roster-list-pane {
  position: sticky;
  top: 72px;
  max-height: calc(100vh - 96px);
  overflow: auto;
  padding-right: 10px;
}

.roster-controls {
  padding: 0 0 14px;
  border-bottom: 1px solid var(--line-dark);
}

.roster-bases {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line-dark);
  border-left: 1px solid var(--line-dark);
  margin-bottom: 15px;
}

.roster-base {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  border-right: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  color: var(--milk-dim);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-align: left;
  padding: 8px 10px;
  line-height: 1.45;
}

.roster-base:hover,
.roster-base[aria-pressed="true"] {
  color: var(--milk);
  background: var(--desk-2);
  box-shadow: inset 3px 0 0 var(--rust);
}

.roster-base-count {
  color: var(--brass);
  font-size: 9px;
  white-space: nowrap;
}

.roster-search-label {
  display: block;
  color: var(--milk-dim);
  font-size: 10px;
  letter-spacing: 0.15em;
  margin-bottom: 4px;
}

.roster-search-label + input,
.roster-search-label + select { margin-bottom: 12px; }

#roster-search,
.roster-sort {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line-dark);
  background: var(--desk-2);
  color: var(--milk);
  font-family: var(--sans);
  font-size: 12px;
  padding: 8px 10px;
}

#roster-search::placeholder { color: rgba(240, 231, 214, 0.34); }

.roster-count {
  color: var(--milk-dim);
  font-size: 10px;
  letter-spacing: 0.08em;
  margin-top: 4px;
}

.roster-stamp {
  color: rgba(240, 231, 214, 0.34);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  margin-top: 3px;
}

.roster-list { padding-top: 5px; }

.roster-row {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  gap: 7px;
  padding: 13px 8px 13px 0;
  border-bottom: 1px solid var(--line-dark);
  color: var(--milk);
  text-align: left;
}

.roster-row:hover,
.roster-row.selected { background: var(--desk-2); }
.roster-row.selected { box-shadow: inset 3px 0 0 var(--rust); padding-left: 8px; }

.roster-row-index {
  color: var(--rust);
  font-size: 9px;
  letter-spacing: 0.12em;
  padding-top: 2px;
}

.roster-row-name {
  display: block;
  color: var(--milk);
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: 0.03em;
  line-height: 1.4;
}

.roster-row-meta {
  display: block;
  color: var(--milk-dim);
  font-size: 9.5px;
  line-height: 1.5;
  margin-top: 3px;
}

.roster-detail {
  min-width: 0;
  max-width: 850px;
  overflow-wrap: anywhere;
}

.roster-card {
  border-top: 3px solid var(--rust);
  padding-top: 20px;
}

.roster-card-head {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line-dark);
}

.roster-photo {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border: 1px solid var(--line-dark);
  filter: saturate(0.9);
  flex: none;
}

.roster-card-head h2 {
  color: var(--milk);
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(21px, 2.4vw, 29px);
  letter-spacing: 0.05em;
  line-height: 1.35;
}

.roster-card-meta {
  color: var(--milk-dim);
  font-size: 11px;
  letter-spacing: 0.06em;
  margin-top: 6px;
}

.roster-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px 28px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line-dark);
}

.roster-field-label {
  color: var(--rust);
  font-size: 9px;
  letter-spacing: 0.2em;
  margin-bottom: 6px;
}

.roster-field-value {
  color: var(--milk);
  font-size: 13px;
  line-height: 1.85;
}

.roster-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-dark);
}

.roster-links a {
  color: var(--brass);
  font-size: 12px;
  letter-spacing: 0.05em;
}

.roster-bio { padding: 20px 0 0; }

.roster-bio-fact {
  color: var(--milk);
  font-size: 13.5px;
  line-height: 2;
}

.roster-bio-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
}

.roster-bio-foot a { color: var(--brass); font-size: 11px; }

.roster-confidence {
  color: var(--milk-dim);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  border: 1px solid var(--line-dark);
  padding: 2px 8px;
}

.roster-caveat {
  color: rgba(240, 231, 214, 0.44);
  font-size: 11px;
  line-height: 1.85;
  margin-top: 12px;
  padding-left: 11px;
  border-left: 2px solid var(--brass);
}

@media (max-width: 899px) {
  .roster { padding: 22px 18px 40px; }
  .roster-layout { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .roster-list-pane { position: static; max-height: none; overflow: visible; padding-right: 0; }
  .roster-card-head { flex-wrap: wrap; gap: 14px; }
}

/* 背表紙が消える幅では、名簿も本文を左端まで戻す。
   この打ち消しは 720px のブロック本体より後に置く必要がある（同詳細度は後勝ちのため）。 */
@media (max-width: 720px) {
  #view-roster { padding-left: 0; }
}

/* ===== この問いの出どころ（種火から制作机へ渡ったとき） =====
   紙面（本人の制作）の上に置くが、資料側の情報なので紙の色を薄く敷いて区別する。
   リスク3（実在作品の模倣へ寄る）の防波堤なので、畳まず常に見える位置に出す。 */

.origin {
  margin: 20px 0 4px;
  padding: 14px 16px 13px;
  background: rgba(43, 38, 32, 0.055);
  border-left: 2px solid var(--rust);
}

.origin-head {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--rust-deep);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  margin-bottom: 9px;
}

.origin-recipe {
  color: var(--ink-soft);
  font-size: 9px;
  letter-spacing: 0.08em;
  border: 1px solid rgba(43, 38, 32, 0.22);
  padding: 1px 7px;
}

.origin-works {
  display: grid;
  gap: 5px;
  list-style: none;
  margin: 0 0 9px;
}

.origin-works li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 9px;
}

.origin-works a,
.origin-works strong {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 13.5px;
  font-weight: 400;
}

.origin-works a {
  text-decoration: underline;
  text-decoration-color: rgba(168, 75, 38, 0.4);
  text-underline-offset: 3px;
}

.origin-works span {
  color: var(--ink-soft);
  font-size: 10px;
}

.origin-none,
.origin-memo {
  color: var(--ink-soft);
  font-size: 11.5px;
  line-height: 1.85;
}

.origin-memo { margin-bottom: 8px; }

.origin-caution {
  color: var(--rust-deep);
  font-size: 10.5px;
  line-height: 1.7;
  padding-top: 8px;
  border-top: 1px solid rgba(43, 38, 32, 0.12);
}

/* 作品 → 制作会社レーダーへの逆リンク。会社から作品へ降りた道を、逆にも通す */
.dbd-radar-link {
  color: var(--brass);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-decoration-color: rgba(156, 130, 63, 0.45);
  text-underline-offset: 3px;
}

/* ===== 舞台スケッチ: 劇場の選択 =====
   「設定を変える」ではなく「劇場を選ぶ」という行為にする。
   形式が変われば客席の位置が変わり、それが構図の条件そのものになる。 */

.stage-venue-section { padding-bottom: 4px; }

.stage-project-venue {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line-dark);
}

.stage-project-venue h3 {
  margin: 0 0 10px;
  color: var(--brass);
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.stage-venue-list {
  display: grid;
  gap: 1px;
  background: var(--line-dark);
  border: 1px solid var(--line-dark);
  margin-bottom: 10px;
}

.stage-venue {
  display: grid;
  gap: 1px;
  min-height: 44px;
  padding: 7px 10px;
  background: var(--desk);
  color: var(--milk-dim);
  text-align: left;
  line-height: 1.35;
}

.stage-venue:hover,
.stage-venue[aria-pressed="true"] {
  background: var(--desk-2);
  color: var(--milk);
  box-shadow: inset 3px 0 0 var(--rust);
}

.stage-venue-name {
  font-family: var(--serif);
  font-size: 13.5px;
  letter-spacing: 0.05em;
}

.stage-venue-sub {
  font-size: 9px;
  letter-spacing: 0.12em;
  color: rgba(240, 231, 214, 0.4);
}

.stage-venue[aria-pressed="true"] .stage-venue-sub { color: var(--brass); }


.stage-sub-label {
  color: var(--milk-dim);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  font-weight: 400;
  margin-bottom: 5px;
}

.stage-size-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 8px;
}

.stage-size {
  min-height: 32px;
  padding: 5px 11px;
  border: 1px solid var(--line-dark);
  background: var(--desk);
  color: var(--milk-dim);
  font-size: 11px;
  letter-spacing: 0.04em;
}

.stage-size:hover,
.stage-size[aria-pressed="true"] {
  border-color: var(--rust);
  background: var(--desk-2);
  color: var(--milk);
}

/* 寸法は「目安」であり、施工や安全の判断には使わせない */
.stage-venue-scale {
  color: rgba(240, 231, 214, 0.36);
  font-size: 9.5px;
  line-height: 1.7;
}

.stage-view-grid { grid-template-columns: 1fr 1fr; }

/* 舞台スケッチ: 客席の位置（サイトラインの検討） */
.stage-seat-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin-bottom: 8px;
}

.stage-seat {
  min-height: 36px;
  padding: 6px 8px;
  border: 1px solid var(--line-dark);
  background: var(--desk);
  color: var(--milk-dim);
  font-size: 11px;
  letter-spacing: 0.03em;
}

.stage-seat:hover,
.stage-seat[aria-pressed="true"] {
  border-color: var(--rust);
  background: var(--desk-2);
  color: var(--milk);
}




/* ===== 舞台スケッチ: プルダウンと2面表示 ===== */

.stage-field-row {
  display: grid;
  gap: 3px;
  margin-bottom: 9px;
}

.stage-field-label {
  color: var(--milk-dim);
  font-size: 9.5px;
  letter-spacing: 0.16em;
}

.stage-select {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line-dark);
  background: var(--desk-2);
  color: var(--milk);
  font-family: var(--sans);
  font-size: 12px;
  padding: 7px 9px;
}

.stage-select:focus { border-color: var(--brass); }

.stage-view-toggles {
  display: grid;
  gap: 6px;
  margin-bottom: 7px;
}

.stage-toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 36px;
  padding: 5px 9px;
  border: 1px solid var(--line-dark);
  background: var(--desk);
  color: var(--milk-dim);
  font-size: 11.5px;
  cursor: pointer;
}

.stage-toggle:hover { background: var(--desk-2); }

.stage-toggle input { accent-color: var(--rust); width: 15px; height: 15px; }

.stage-toggle:has(input:checked) {
  border-color: var(--rust);
  background: var(--desk-2);
  color: var(--milk);
}

.stage-view-hint {
  color: rgba(240, 231, 214, 0.36);
  font-size: 10px;
  line-height: 1.65;
}

/* 光の意図カードと図の作業領域。
   既定は今までどおり縦に並ぶ（display: contents で親の流れに素通しする）。
   カードを開いたときだけ、広い画面で図の左横へ寄せる。
   ★カードを開くと図が画面外へ押し出されて「書きながら図を見る」ができなかったため。 */
.stage-work-area { display: contents; }

/* 寄せる下限は900px。当初は1100pxにしていたが、iPad横（1024px）で実測したところ
   縦積みでは正面図が画面の外（上端y=908／画面900px）へ出て、
   「書きながら図を見る」というこの機能の要が効かなかった。
   1024pxでカード340px・正面図395pxが見え、入力欄も292px残る。 */
@media (min-width: 900px) {
  .stage-work-area.is-docked {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 14px;
    align-items: start;
  }
  .stage-work-area.is-docked > .stage-light-intent {
    position: sticky;
    top: 8px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    grid-row: 1 / span 2;
  }
  .stage-work-area.is-docked > .stage-light-intent-compare,
  .stage-work-area.is-docked > .stage-canvas-stack { grid-column: 2; }

  /* 横に寄せた列は本文2段分の幅しかない。横並びのままだと
     「何を起こしたい？」の欄が1行8文字ほどになり、書きながら読み返せない。
     寄せているあいだだけ縦に積み直す。 */
  .stage-work-area.is-docked .stage-light-intent-core { grid-template-columns: minmax(0, 1fr); }
  .stage-work-area.is-docked .stage-light-transition { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stage-work-area.is-docked .stage-light-transition-note { grid-column: 1 / -1; }
  /* 消す押しボタンが本文の脇で間延びするので、寄せているあいだは下へ回す */
  .stage-work-area.is-docked .stage-light-intent-foot {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
}

/* 画面に余裕があるときは、カードを少し広げて書きやすくする。
   狭い側（900〜1099px）で340pxに抑えているのは図の取り分を守るためで、
   広い画面までその窮屈さを持ち込む理由はない。 */
@media (min-width: 1100px) {
  .stage-work-area.is-docked {
    grid-template-columns: 380px minmax(0, 1fr);
    gap: 18px;
  }
}

/* 2面は縦に積む。横に割ると1面あたりが半分になり、
   煽りや床の潰れといった細部が読めなくなる。 */
.stage-canvas-stack {
  display: grid;
  gap: 22px;
}

.stage-canvas-caption {
  color: var(--brass);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  margin-bottom: 5px;
}

/* ===== 舞台スケッチ: ショーと場面 ===== */

.stage-text-input {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--line-dark);
  background: var(--desk-2);
  color: var(--milk);
  font-family: var(--sans);
  font-size: 12px;
  padding: 6px 9px;
  margin-bottom: 7px;
}

.stage-text-input:focus { border-color: var(--brass); }
.stage-text-input::placeholder { color: rgba(240, 231, 214, 0.3); }

.stage-version-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  /* stretch にしないと、ボタンだけ字の高さぶんになって入力欄と段差ができる */
  align-items: stretch;
}

.stage-version-input { margin-bottom: 0; }

.stage-version-note {
  color: rgba(240, 231, 214, 0.36);
  font-size: 9.5px;
  line-height: 1.65;
  margin: 6px 0 9px;
}

.stage-io-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.stage-import-label {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* ショーのパネルは〈名前と版〉〈ショーを行き来する〉〈ファイルへ出し入れする〉の
   三つのまとまりでできている。ここだけ縦の刻みと列を一本化する。
   ・段の間隔は、まとまりの中は6px、まとまりの境目は13px の二種類だけにする
     （以前は 7/6/9/10/0/10 とばらばらで、境目の10pxより中の0pxが詰まっていたため、
     〈構成テンプレートから作る〉が下の書き出し行にくっついて読めていた）
   ・列は 1fr 1fr の一種類だけ。〈複製〉も右列へ入れて、
     〈新しいショー〉〈読み込む〉と同じ中心線を通す
   全幅の .stage-minor-action が左寄せなのはアプリ共通の作法（控えめな操作の印）なので、
   ここでも変えない。まとまりの中へ寄せることで、上の行の続きとして読めるようにする。 */
.stage-project-section .stage-panel-body,
.stage-project-section .stage-tablet-panel-page {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stage-project-section .stage-text-input { margin-bottom: 0; }
.stage-project-section .stage-version-row { grid-template-columns: 1fr 1fr; }
.stage-project-section .stage-version-note { margin: 0; line-height: 1.5; }
.stage-project-section .stage-minor-action { margin-top: 0; }
/* まとまりの境目だけ間を広げる。6px の gap と合わせて 13px になる */
.stage-project-section .stage-io-row { margin-top: 7px; }
/* 劇場サイズは仕切り線を持つ別の節。以前と同じ16pxの間を保つ */
.stage-project-section .stage-project-venue { margin-top: 10px; }

/* ===== 舞台スケッチ: 固定 SceneStudy =====
 * 汎用のカード一覧ではなく、稽古場で横へ書き足す実験記録の欄として見せる。
 * 8ビートの番号を同じ幅で並べ、配置を切り替える手を最短にする。 */
.stage-study-panel .stage-panel-body {
  border-left: 2px solid rgba(211, 172, 89, 0.62);
  padding-left: 10px;
}

.stage-study-status {
  margin: 0 0 7px;
  color: var(--rust);
  font-size: 8.5px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.15em;
  line-height: 1.5;
}

.stage-study-title {
  margin: 0 0 9px;
  color: var(--paper);
  font-family: var(--serif);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.6;
}

.stage-study-input,
.stage-study-empty,
.stage-study-save-note,
.stage-study-source,
.stage-study-fallback {
  margin: 0 0 9px;
  color: var(--milk-dim);
  font-size: 10.5px;
  line-height: 1.72;
}

.stage-study-open {
  width: 100%;
  min-height: 42px;
  margin: 2px 0 8px;
  padding: 7px 9px;
  border: 1px solid var(--rust);
  background: rgba(168, 75, 38, 0.2);
  color: var(--paper);
  font-family: var(--serif);
  line-height: 1.45;
  white-space: normal;
  cursor: pointer;
}

.stage-study-open:hover,
.stage-study-open:focus-visible {
  border-color: var(--brass);
  background: rgba(168, 75, 38, 0.32);
  outline: none;
}

.stage-study-rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin: 9px 0 12px;
}

.stage-study-rail::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 5%;
  right: 5%;
  top: 50%;
  height: 1px;
  background: rgba(211, 172, 89, 0.28);
}

.stage-study-beat-button {
  position: relative;
  z-index: 1;
  min-height: 28px;
  padding: 3px 2px;
  border: 1px solid var(--line-dark);
  background: var(--desk);
  color: rgba(240, 231, 214, 0.52);
  font-size: 9.5px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
  cursor: pointer;
}

.stage-study-beat-button:hover { border-color: var(--brass); color: var(--milk); }

.stage-study-beat-button[aria-pressed="true"] {
  border-color: var(--rust);
  background: var(--rust-deep);
  color: var(--paper);
  box-shadow: inset 0 -2px 0 var(--brass);
}

.stage-study-beat-button:disabled { opacity: 0.28; cursor: default; }

.stage-study-beat-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 8px;
  margin-bottom: 9px;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(240, 231, 214, 0.14);
}

.stage-study-beat-number {
  color: var(--rust);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}

.stage-study-beat-head h4 {
  color: var(--paper);
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
}

.stage-study-field {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(240, 231, 214, 0.08);
}

.stage-study-field > span,
.stage-study-minihead {
  color: var(--brass);
  font-size: 8.5px;
  letter-spacing: 0.1em;
  line-height: 1.55;
}

.stage-study-field p {
  margin: 0;
  color: var(--milk);
  font-size: 10.5px;
  line-height: 1.68;
}

.stage-study-detail {
  margin-top: 9px;
  border-top: 1px solid rgba(211, 172, 89, 0.28);
}

.stage-study-detail summary {
  padding: 8px 0 5px;
  color: var(--milk-dim);
  font-size: 9.5px;
  letter-spacing: 0.05em;
  line-height: 1.5;
  cursor: pointer;
}

.stage-study-detail[open] summary { color: var(--brass); }
.stage-study-detail-body { padding: 3px 0 5px; }
.stage-study-minihead { margin: 8px 0 4px; }

.stage-study-list,
.stage-study-card-list {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0 0 0 15px;
  color: var(--milk-dim);
  font-size: 9.8px;
  line-height: 1.58;
}

.stage-study-card-list li::marker { color: var(--rust); }

.stage-study-source {
  margin-top: 8px;
  overflow-wrap: anywhere;
  color: rgba(240, 231, 214, 0.38);
  font-size: 8.8px;
}

.stage-study-save-note {
  margin: 10px 0 0;
  padding-top: 8px;
  border-top: 1px solid rgba(240, 231, 214, 0.09);
  color: rgba(240, 231, 214, 0.48);
  font-size: 9.5px;
}

/* 場面の帯。順番が見えることが大事なので横に並べる */
.stage-scenes {
  border: 1px solid var(--line-dark);
  background: var(--desk-2);
  padding: 13px 15px 14px;
  margin-bottom: 16px;
}

.stage-scenes-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.stage-scenes-head h2 {
  color: var(--brass);
  font-size: 10px;
  letter-spacing: 0.2em;
  font-weight: 400;
}

/* 場面を送る列。作る・並べ替える道具とは役目が違うので、上に一段分ける。
   ★この欄は右の列（268px）に入る。横一列に流すと、つまみが幅0まで潰れて
   触れなくなる（実際にそうなっていた）。二列の枠で場所を配り切る。 */
.stage-scene-move {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 6px 6px;
  margin-bottom: 8px;
}

.stage-scene-move button { min-height: 30px; padding: 4px 6px; }

.stage-anim-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  color: var(--milk-dim);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  cursor: pointer;
  user-select: none;
}

.stage-anim-toggle input { width: 12px; height: 12px; margin: 0; accent-color: var(--rust); }
.stage-anim-toggle:hover { color: var(--milk); }

/* 転換にかける時間。入り切りのすぐ隣に置く */
.stage-anim-speed {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  color: var(--milk-dim);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.stage-anim-speed input[type="range"] {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  margin: 0;
  accent-color: var(--rust);
}

.stage-anim-speed input:disabled { opacity: 0.35; cursor: default; }
.stage-anim-speed span { flex: 0 0 auto; min-width: 30px; text-align: right; }

.stage-scene-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.stage-scene-actions button {
  min-height: 30px;
  padding: 4px 11px;
  font-size: 10.5px;
}

.stage-scene-list {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding-bottom: 5px;
  margin-bottom: 10px;
}

.stage-scene-chip {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  min-width: 150px;
  padding: 6px 11px;
  border: 1px solid var(--line-dark);
  background: var(--desk);
  color: var(--milk-dim);
  text-align: left;
  white-space: nowrap;
}

.stage-scene-chip:hover { background: var(--desk-3); color: var(--milk); }

.stage-scene-chip[aria-pressed="true"] {
  border-color: var(--rust);
  background: var(--desk-3);
  color: var(--milk);
  box-shadow: inset 3px 0 0 var(--rust);
}

.stage-scene-num {
  color: var(--rust);
  font-size: 9px;
  letter-spacing: 0.1em;
}

.stage-scene-name {
  font-family: var(--serif);
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stage-scene-count {
  color: rgba(240, 231, 214, 0.34);
  font-size: 9px;
}

.stage-scene-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 8px;
}

.stage-scene-meta .stage-text-input { margin-bottom: 0; }

.stage-name-toggle { margin-top: 7px; }

@media (max-width: 760px) {
  .stage-scene-meta { grid-template-columns: 1fr; }
}

/* ===== 舞台スケッチ: パネルの並べ替えと折りたたみ ===== */

.stage-panel {
  position: relative;
  border-top: 1px solid var(--line-dark);
  padding: 0 0 14px;
  margin-bottom: 0;
}

/* 説明を引き出す「?」。見出しの右、畳むしるしの手前に置く。
   見出しはボタンなので、その中には入れられない（ボタンの入れ子は作れない） */
.stage-panel-help {
  position: absolute;
  top: 10px;
  right: 22px;
  width: 18px;
  height: 18px;
  min-height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-dark);
  border-radius: 50%;
  background: none;
  color: rgba(240, 231, 214, 0.42);
  font-size: 10px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}

.stage-panel-help:hover { color: var(--milk); border-color: var(--brass); }

.stage-panel-help[aria-pressed="true"] {
  color: var(--paper);
  border-color: var(--brass);
  background: rgba(211, 172, 89, 0.2);
}

.stage-panel.is-collapsed .stage-panel-help { display: none; }

/* 種類を選ぶボタン。見た目は選択欄と揃え、押すと絵の一覧が開く */
.stage-kind-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  text-align: left;
  cursor: pointer;
}

/* 正面と平面の出し分け。狭い画面では一枚ずつ見る */
.stage-view-switch {
  display: inline-flex;
  border: 1px solid var(--line-dark);
}

.stage-view-switch button {
  min-height: 30px;
  padding: 4px 11px;
  border: 0;
  background: none;
  color: var(--milk-dim);
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  cursor: pointer;
}

.stage-view-switch button + button { border-left: 1px solid var(--line-dark); }
.stage-view-switch button:hover { color: var(--milk); }

.stage-view-switch button[aria-pressed="true"] {
  color: var(--paper);
  background: rgba(168, 75, 38, 0.28);
}

/* 拡大しているときだけ出る、等倍へ戻す札 */
.stage-zoom-reset[hidden] { display: none; }

/* ===== 使い方の案内 =====
   画面を暗くして閉じ込めるのではなく、見てほしい場所へ枠を当てて、
   隅にカードを置くだけにする。触りながら読めるようにするため。 */
.stage-tour[hidden] { display: none; }

/* 暗幕。穴が一つで済むなら枠の影（0 0 0 9999px）で足りるが、
   案内の多くは「左の欄のボタンを押して、絵の上で手を動かす」形なので、
   明るくしておく所が二箇所ある。影では二つ目の穴があけられないので、
   一枚のパスに穴をあける。★穴は外枠と逆回りに描く（nonzero）。
   重なっても穴として残る——evenodd だと重なった所が塞がる。 */
.stage-tour-shade {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 59;
  pointer-events: none;
}

.stage-tour-shade path { fill: rgba(9, 12, 14, 0.62); }

/* 注目枠。地の色が錆・真鍮の暖色なので、枠はその補色（青緑）で立てる。
   同系色だと道具立てに溶けて、どこを見ればよいのか分からない。 */
.stage-tour-ring {
  position: fixed;
  z-index: 60;
  border: 3px solid #35d6cf;
  box-shadow:
    0 0 0 1px rgba(53, 214, 207, 0.5),
    0 0 22px 4px rgba(53, 214, 207, 0.55),
    inset 0 0 18px rgba(53, 214, 207, 0.22);
  pointer-events: none;
  animation: stage-tour-pulse 1.5s ease-in-out infinite;
}

@keyframes stage-tour-pulse {
  0%, 100% { border-color: #35d6cf; }
  50% { border-color: #9ff4ef; }
}

@media (prefers-reduced-motion: reduce) {
  .stage-tour-ring { animation: none; }
}

.stage-tour-card {
  /* 左上に置く。絵と道具の両方が右側に広がっているので、
     ここが一番ものを隠さない。枠と同じ青緑で、案内であることを示す。 */
  position: fixed;
  left: 22px;
  top: 22px;
  z-index: 72;
  width: min(360px, calc(100vw - 40px));
  padding: 16px 18px 14px;
  background: var(--desk-2);
  border: 1px solid #35d6cf;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.6), 0 0 20px rgba(53, 214, 207, 0.18);
}

.stage-tour-step {
  margin: 0 0 6px;
  color: #7fe3dd;
  font-size: 10px;
  letter-spacing: 0.18em;
}

.stage-tour-card h2 {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: 16px;
  letter-spacing: 0.06em;
  color: var(--paper);
}

.stage-tour-card p:not(.stage-tour-step) {
  margin: 0 0 14px;
  font-size: 12px;
  line-height: 1.75;
  color: var(--milk);
}

.stage-tour-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

/* 三つ並べても折り返さないように、字を詰めて余白を切る */
.stage-tour-actions button {
  flex: 0 0 auto;
  width: auto;
  min-height: 34px;
  padding: 6px 14px;
  font-size: 11px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.stage-tour-actions button:disabled { opacity: 0.35; cursor: default; }
.stage-tour-actions #stage-tour-close { margin-right: auto; }

/* できた合図。次へ進む前に一息 */
.stage-tour-card.is-done { border-color: #9ff4ef; }
.stage-tour-card.is-done h2::after {
  content: " ✓";
  color: #35d6cf;
}

@media (max-width: 720px) {
  .stage-tour-card { left: 12px; right: 12px; top: 12px; width: auto; }
}

/* 言語の切り替え。書き出しの隣に、控えめな枠で置く */
.stage-lang {
  min-height: 34px;
  padding: 5px 12px;
  border: 1px solid var(--line-dark);
  background: none;
  color: var(--milk-dim);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.1em;
  cursor: pointer;
}

.stage-lang:hover { color: var(--milk); border-color: var(--brass); }
.stage-lang[aria-pressed="true"] { color: var(--paper); border-color: var(--brass); }

/* 中央のバーの「?」。項目の「?」と同じ形にして、役目をそろえる */
.stage-hint-help {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  min-height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-dark);
  border-radius: 50%;
  background: none;
  color: rgba(240, 231, 214, 0.42);
  font-size: 10px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}

.stage-hint-help:hover { color: var(--milk); border-color: var(--brass); }

.stage-hint-help[aria-pressed="true"] {
  color: var(--paper);
  border-color: var(--brass);
  background: rgba(211, 172, 89, 0.2);
}

.stage-tool-hint[hidden] { display: none; }

/* 掴んでいるパネル。指について動くので、浮いていることを影と傾きで示す */
.stage-panel.is-dragging {
  opacity: 0.97;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.6);
  background: var(--desk);
  border-top-color: var(--brass);
  cursor: grabbing;
  will-change: left, top;
}

/* 掴んだ跡の空き。ここが動くことで、残りのパネルが滑って隙間を空ける */
.stage-panel-hole {
  border: 1px dashed rgba(156, 130, 63, 0.4);
  background: rgba(156, 130, 63, 0.05);
  box-sizing: border-box;
}

body.is-panel-dragging {
  cursor: grabbing;
  user-select: none;
  -webkit-user-select: none;
}

/* パネルの頭。ここを押すと畳み、つまみを掴むと列を移せる */
.stage-panel-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 36px;
  padding: 10px 2px 8px;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
}

.stage-panel-grip {
  color: rgba(240, 231, 214, 0.28);
  font-size: 12px;
  line-height: 1;
  cursor: grab;
  padding: 3px 2px;
}

.stage-panel-grip:active { cursor: grabbing; }

/* つまみの上では、指の動きを画面のスクロールに取られないようにする */
.stage-panel-grip { touch-action: none; }
.stage-panel-head:hover .stage-panel-grip { color: var(--brass); }

.stage-panel-title {
  color: var(--brass);
  font-size: 10px;
  letter-spacing: 0.2em;
}

/* 開閉の向きを三角で示す */
.stage-panel-mark {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid rgba(240, 231, 214, 0.42);
  transition: transform 0.12s ease;
}

.stage-panel.is-collapsed .stage-panel-mark { transform: rotate(-90deg); }
.stage-panel.is-collapsed { padding-bottom: 0; }

.stage-col.is-over {
  outline: 1px dashed rgba(168, 75, 38, 0.55);
  outline-offset: 4px;
}

/* 席は正面の絵の上に置く。どこから見た絵かを絵と一緒に読むため */
.stage-seat-strip {
  padding: 9px 11px 10px;
  border-bottom: 1px solid var(--line-dark);
  background: rgba(20, 17, 14, 0.6);
}

.stage-seat-strip .stage-seat-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 6px;
}

.stage-seat-strip .stage-seat {
  min-height: 30px;
  padding: 4px 12px;
  font-size: 10.5px;
}

/* 絵の見出しと開閉のつまみ */
.stage-canvas-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px 6px;
}

.stage-canvas-bar .stage-canvas-caption { flex: 1 1 auto; min-width: 0; }

.stage-canvas-bar .stage-canvas-caption { margin-bottom: 0; }

/* 正面の絵の真上に出す、そのシーンの説明。
   絵より前に出過ぎないよう、見出しは小さく、本文は落ち着いた明度で置く。 */
/* 絵のすぐ上の「シーンの行」。前後の送りと、その場面の説明を横に並べる。
   一覧の欄は畳めるので、送りを一覧の中だけに置くと畳んだ瞬間に行き来できなくなる。
   狭い幅では説明が下へ折り返すが、送りは必ず一行目に残る。 */
.stage-scene-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-bottom: 8px;
  padding: 7px 10px;
  border: 1px solid var(--line-dark);
  background: var(--desk-2);
}

.stage-scene-step {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

/* いま何場面目か。送りだけでは今どこにいるかが読めない */
.stage-scene-now {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--milk-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  max-width: 15em;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 帯はパネルの外なので、パネル用の字詰めが効かない。ここで揃える */
.stage-scene-bar .btn-quiet {
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 6px 12px;
  white-space: nowrap;
  min-height: 30px;
}

.stage-scene-bar .btn-quiet:disabled { opacity: 0.35; cursor: default; }
.stage-scene-bar .btn-quiet:disabled:hover { border-color: var(--line-dark); }

/* 前と次の送り。字を読み下さなくても向きが分かるよう色を分ける。
   戻る＝石板色、進む＝錆色。面は塗らず、矢印と枠にだけ色を差す
   （絵のすぐ上の帯なので、塗ると舞台面より先に目が行ってしまう）。 */
.stage-scene-step-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-left: 10px;
  padding-right: 10px;
}

.stage-scene-step-arrow {
  font-size: 9px;
  line-height: 1;
  transition: transform 120ms ease;
}

.stage-scene-bar .stage-scene-step-btn.is-prev {
  border-color: rgba(139, 152, 161, 0.42);
  color: rgba(240, 231, 214, 0.72);
}
.stage-scene-step-btn.is-prev .stage-scene-step-arrow { color: var(--slate); }
.stage-scene-bar .stage-scene-step-btn.is-prev:hover:not(:disabled) {
  border-color: var(--slate);
  color: var(--milk);
}
.stage-scene-step-btn.is-prev:hover:not(:disabled) .stage-scene-step-arrow {
  transform: translateX(-2px);
}

.stage-scene-bar .stage-scene-step-btn.is-next {
  border-color: rgba(223, 100, 51, 0.46);
  color: var(--milk);
}
.stage-scene-step-btn.is-next .stage-scene-step-arrow { color: var(--rust-ink); }
.stage-scene-bar .stage-scene-step-btn.is-next:hover:not(:disabled) {
  border-color: var(--rust-ink);
  color: var(--milk);
}
.stage-scene-step-btn.is-next:hover:not(:disabled) .stage-scene-step-arrow {
  transform: translateX(2px);
}

/* 使えないときは色も引く。色が残ると「押せる」と読めてしまう */
.stage-scene-bar .stage-scene-step-btn:disabled {
  border-color: var(--line-dark);
  color: var(--milk-dim);
}
.stage-scene-step-btn:disabled .stage-scene-step-arrow { color: var(--milk-dim); }

/* 一覧への入り口。送りの二つより一段弱く、記号だけの正方形で置く */
.stage-scene-bar .stage-scene-bar-grid {
  padding: 6px 0;
  width: 30px;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  letter-spacing: 0;
  color: var(--milk-dim);
  margin-left: 2px;
}
.stage-scene-bar .stage-scene-bar-grid:hover {
  border-color: var(--brass);
  color: var(--milk);
}

/* 説明は残り幅いっぱいを取る。行の中で一番よく読む部分なので、
   送りより先に折り返させない。
   ★縦は伸ばさない。伸ばすと、書き込み欄の高さを内容から測る処理
     （growSceneDesc）が空の行でも器の高さを拾い、帯が厚く空いてしまう。 */
.stage-scene-bar .stage-scene-desc {
  flex: 1 1 240px;
  min-width: 0;
  align-self: center;
  align-items: center;
  padding: 0;
  border-bottom: 0;
  margin-bottom: 0;
}

.stage-scene-bar .stage-scene-desc-text { align-self: center; }

.stage-scene-desc {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 0 10px 7px;
  border-bottom: 1px solid var(--line-dark);
  margin-bottom: 6px;
}

.stage-scene-desc[hidden] { display: none; }

.stage-scene-desc-label {
  flex: 0 0 auto;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--milk-dim);
}

/* 枠を持たない書き込み欄。読んでいるあいだは本文にしか見えず、
   押したときだけ下線が点いて「ここは直せる」と分かる。 */
.stage-scene-desc-text {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  line-height: 1.55;
  color: var(--milk);
  resize: none;
  overflow: hidden;
  height: 19px;
}

.stage-scene-desc-text::placeholder { color: rgba(240, 231, 214, 0.28); }

.stage-scene-desc-text:hover { border-bottom-color: var(--line-dark); }

.stage-scene-desc-text:focus {
  outline: none;
  border-bottom-color: var(--brass);
}

/* 光の意図カード。意図→視線→層→変化の読み順を固定する。 */
.stage-light-intent {
  min-width: 0;
  margin-bottom: 8px;
  padding: 7px 10px;
  border: 1px solid var(--line-dark);
  background: var(--desk-2);
}

.stage-light-intent[hidden] { display: none; }

.stage-light-intent-compare {
  min-width: 0;
  margin-bottom: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line-dark);
  background: rgba(28, 23, 19, 0.88);
  color: var(--milk-dim);
  font-size: 10.5px;
}

.stage-light-intent-compare[hidden] { display: none; }

.stage-light-intent-compare-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  min-height: 29px;
}

.stage-light-intent-compare-row + .stage-light-intent-compare-row {
  border-top: 1px solid rgba(240, 231, 214, 0.08);
}

.stage-light-intent-compare-kicker {
  flex: 0 0 7em;
  color: var(--brass);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.stage-light-intent-compare-row .btn-quiet {
  margin-left: auto;
  padding: 4px 9px;
  min-height: 25px;
  font-size: 10px;
}

.stage-light-intent-compare-note,
.stage-light-preset-intent-note {
  margin: 5px 0 0;
  color: rgba(240, 231, 214, 0.42);
  font-size: 9px;
  line-height: 1.55;
}

.stage-light-preset-intent-note {
  margin: 0 0 12px;
  padding: 7px 9px;
  border-left: 2px solid rgba(211, 172, 89, 0.55);
  background: rgba(211, 172, 89, 0.04);
}

.stage-light-preset-intent-note[hidden] { display: none; }

.stage-light-intent-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 8px;
  min-height: 28px;
  padding: 7px 2px 1px;
  color: var(--milk-dim);
  cursor: pointer;
  list-style: none;
}

.stage-light-intent-summary::-webkit-details-marker { display: none; }

.stage-light-intent-summary::after {
  content: "▸";
  color: rgba(211, 172, 89, 0.62);
  font-size: 10px;
}

.stage-light-intent[open] > .stage-light-intent-summary::after { content: "▾"; }

.stage-light-intent-kicker {
  color: var(--brass);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.stage-light-intent-summary-text {
  min-width: 0;
  color: rgba(240, 231, 214, 0.66);
  font-family: var(--serif);
  font-size: 11px;
  line-height: 1.45;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stage-light-intent-body {
  display: grid;
  gap: 12px;
  margin: 5px 0 3px;
  padding: 10px 10px 10px 14px;
  border-left: 2px solid rgba(211, 172, 89, 0.55);
  background: rgba(211, 172, 89, 0.025);
}

.stage-light-intent-core {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.stage-light-intent label,
.stage-light-optional label {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--milk-dim);
  font-size: 9.5px;
  letter-spacing: 0.05em;
}

.stage-light-intent input,
.stage-light-intent textarea,
.stage-light-intent select {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  border: 0;
  border-bottom: 1px solid var(--line-dark);
  border-radius: 0;
  background: rgba(13, 12, 11, 0.26);
  color: var(--milk);
  font: 11px/1.5 var(--sans);
  padding: 6px 7px;
}

.stage-light-intent textarea { resize: vertical; }

.stage-light-intent input:focus,
.stage-light-intent textarea:focus,
.stage-light-intent select:focus {
  outline: none;
  border-bottom-color: var(--brass);
  background: rgba(13, 12, 11, 0.42);
}

.stage-light-intent input::placeholder,
.stage-light-intent textarea::placeholder { color: rgba(240, 231, 214, 0.27); }

.stage-light-layers,
.stage-light-transition {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.stage-light-layers legend,
.stage-light-transition legend {
  margin-bottom: 6px;
  color: var(--paper);
  font-family: var(--serif);
  font-size: 10.5px;
  letter-spacing: 0.04em;
}

.stage-light-layer-row {
  grid-template-columns: 48px 118px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-height: 34px;
  border-top: 1px solid rgba(240, 231, 214, 0.07);
}

.stage-light-layer-row:last-child { border-bottom: 1px solid rgba(240, 231, 214, 0.07); }
.stage-light-layer-row > span { color: var(--brass); }

.stage-light-transition {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.stage-light-transition legend { grid-column: 1 / -1; }
.stage-light-transition-note { grid-column: 1 / -1; }

.stage-light-optional {
  border-top: 1px dashed rgba(240, 231, 214, 0.14);
  padding-top: 7px;
}

.stage-light-optional > summary {
  color: rgba(240, 231, 214, 0.5);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  cursor: pointer;
}

.stage-light-optional[open] {
  display: grid;
  gap: 8px;
}

.stage-light-intent-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid rgba(240, 231, 214, 0.08);
  padding-top: 8px;
}

.stage-light-intent-foot p {
  max-width: 62ch;
  margin: 0;
  color: rgba(240, 231, 214, 0.38);
  font-size: 9px;
  line-height: 1.6;
}

.stage-light-intent-foot .btn-quiet {
  flex: 0 0 auto;
  color: rgba(240, 231, 214, 0.48);
}

.stage-light-intent-foot .btn-quiet:disabled { opacity: 0.32; cursor: default; }

@media (max-width: 760px) {
  .stage-light-intent-core,
  .stage-light-transition { grid-template-columns: minmax(0, 1fr); }
  .stage-light-transition legend,
  .stage-light-transition-note { grid-column: 1; }
  .stage-light-layer-row { grid-template-columns: 44px minmax(0, 1fr); }
  .stage-light-layer-row input { grid-column: 1 / -1; }
  .stage-light-intent-foot { align-items: stretch; flex-direction: column; }
}

/* 絵のバーに置く道具の入り切り */
.stage-canvas-tool {
  border: 1px solid var(--line-dark);
  background: none;
  color: var(--milk-dim);
  min-height: 26px;
  padding: 3px 10px;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  line-height: 1;
  cursor: pointer;
}

.stage-canvas-tool:hover { color: var(--milk); border-color: var(--brass); }

.stage-canvas-tool[aria-pressed="true"] {
  color: var(--paper);
  border-color: var(--rust);
  background: rgba(168, 75, 38, 0.27);
}

/* 絵の枠の上に置く入り切り。中央の道具バーではなく、効く絵のすぐ上に置く */
.stage-canvas-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  color: var(--milk-dim);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  line-height: 1;
  cursor: pointer;
  user-select: none;
}

.stage-canvas-toggle:hover { color: var(--milk); }

.stage-canvas-toggle input {
  width: 12px;
  height: 12px;
  margin: 0;
  accent-color: var(--rust);
}

.stage-canvas-toggle[hidden] { display: none; }

/* 開閉のつまみ。✕は「消す」に見えるので三角にして、開いているかどうかを
   向きで示す（▾=開いている／▸=閉じている）。右上に置く。 */
.stage-canvas-close {
  border: 1px solid var(--line-dark);
  background: none;
  color: var(--milk-dim);
  min-width: 36px;
  min-height: 28px;
  font-size: 12px;
  line-height: 1;
  transition: color 0.15s, border-color 0.15s;
}

.stage-canvas-close:hover { color: var(--milk); border-color: var(--rust); }

.stage-canvas-close[aria-expanded="false"] {
  color: var(--brass);
  border-color: rgba(156, 130, 63, 0.45);
}

/* 中央列の一番上に置く一本のバー。
   操作の切り替えと「名前を出す」は、演者や舞台セットの持ち物ではなく
   絵そのものの見え方を決めるものなので、絵のすぐ上に集める。 */
.stage-center-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 9px;
  padding: 7px 9px;
  border: 1px solid var(--line-dark);
  background: var(--desk);
}

/* 道具の帯。区切りの余白を挟むので、桁で数えるgridではなく並べるflexにする
   （gridのままだと区切りが1桁を食って、札の幅が揃わなくなる） */
.stage-center-bar .stage-tool-grid {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

/* 名前の入り切りから右は、絵の見え方の設定。道具の列とは役目が違うので右へ寄せる
   （実際の指定は .stage-name-toggle の margin リセットより後ろにある） */

.stage-center-bar .stage-tool-hint {
  flex: 1 1 140px;
  order: 9;
  min-width: 0;
  margin: 0;
}

.stage-center-bar .stage-name-toggle {
  flex: 0 0 auto;
  margin: 0;
  min-height: 30px;
}

/* 右寄せは、上の margin:0 より後に置く（先に書くと打ち消される） */
.stage-center-bar .stage-bar-right { margin-left: auto; }

.stage-center-bar #stage-swap-center { flex: 0 0 auto; }

@media (max-width: 900px) {
  .stage-center-bar .stage-tool-hint { flex-basis: 100%; order: 9; }
}

.stage-center-bar button { min-height: 30px; font-size: 10.5px; padding: 4px 12px; }
.stage-center-bar .stage-tool-grid button { padding: 4px 10px; letter-spacing: 0.04em; }

/* 道具のうち「ものを動かす・照明を動かす・矢印を描く」は記号だけにする。
   毎日いちばん多く押す三つで、形を覚えれば字は読まなくなる。
   名前は span に残したまま隠すので、読み上げと英語切替はそのまま効く
   （消すと画面読み上げで「ボタン」としか読まれなくなる）。 */
.stage-center-bar .stage-tool-grid button.is-icon {
  width: 40px;
  min-width: 40px;
  padding: 4px 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.stage-center-bar .stage-tool-grid button.is-icon .stage-tool-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.stage-tool-icon {
  font-size: 15px;
  line-height: 1;
  display: block;
}

/* 選んでいる道具の記号は、字の色より一段はっきり出す */
.stage-center-bar .stage-tool-grid button.is-icon[aria-pressed="true"] .stage-tool-icon {
  color: var(--paper);
}

/* 記号の上に出す説明。名前・ショートカット・使い方の三つを一枚で見せる。
   環境設定「アイコンの説明」でOFFにできる（覚えたら消せる）。
   ネイティブの title は出るまで遅く、字面も揃わないので自前で持つ。 */
.stage-tip {
  position: fixed;
  z-index: 90;
  max-width: 22em;
  padding: 7px 10px 8px;
  border: 1px solid var(--brass);
  background: var(--desk-3);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  opacity: 0;
  transition: opacity 90ms ease;
}

.stage-tip.is-on { opacity: 1; }
.stage-tip[hidden] { display: none; }

.stage-tip-name {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  color: var(--paper);
  letter-spacing: 0.06em;
}

/* ショートカットの字。キーの形に見せると、押せるものだと一目で分かる */
.stage-tip-key {
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: var(--brass);
  border: 1px solid rgba(156, 130, 63, 0.6);
  padding: 1px 5px;
  white-space: nowrap;
}

.stage-tip-hint {
  margin: 4px 0 0;
  font-size: 10.5px;
  line-height: 1.6;
  color: var(--milk-dim);
}

/* 上部の歯車。字を置かず正方形にして、隣の「プレゼン」と役目を分ける */
.stage-gear-btn {
  width: 34px;
  min-width: 34px;
  padding-left: 0;
  padding-right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
}

/* 環境設定の中の言語。切り替えの札は右端に置く（他の行は左に印がある） */
.stage-pref-lang-row {
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.stage-pref-lang-body { display: block; }

.stage-pref-lang-row .stage-lang {
  flex: 0 0 auto;
  min-width: 74px;
}

/* 環境設定の中のショートカット一覧。既定は畳んでおく——毎回開く人のためではなく、
   「アイコンの説明」を消した人が思い出しに来るための場所なので、
   ふだんは設定の並びを邪魔しない。 */
.stage-pref-keys {
  border-bottom: 1px solid rgba(211, 172, 89, 0.14);
  padding: 7px 2px 9px;
}

.stage-pref-keys-summary {
  cursor: pointer;
  font-size: 14px;
  color: rgba(239, 231, 214, 0.92);
  list-style: none;
}

.stage-pref-keys-summary::-webkit-details-marker { display: none; }

.stage-pref-keys-summary::before {
  content: "▸";
  display: inline-block;
  width: 1.1em;
  color: var(--brass);
  transition: transform 120ms ease;
}

.stage-pref-keys[open] .stage-pref-keys-summary::before { content: "▾"; }

.stage-pref-keys-body {
  margin: 8px 0 0 1.1em;
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}

/* 名前とキーを両端に置く。目はキーの列だけを縦に追える */
.stage-pref-key-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin: 0;
  font-size: 12px;
  color: rgba(239, 231, 214, 0.72);
}

.stage-pref-keys-body .stage-pref-hint { margin-top: 6px; }

/* 場面は右列で縦に積む */
.stage-col .stage-scenes {
  border: 0;
  background: none;
  padding: 0 0 14px;
  margin-bottom: 0;
}

/* 場面の欄は下の縁を掴んで高さを変えられる。
   入れ子が深くなると320pxでは足りず、狭い窓の中を延々と繰るはめになる。 */
.stage-col .stage-scene-list {
  flex-direction: column;
  overflow-x: visible;
  height: 320px;
  min-height: 120px;
  max-height: 80vh;
  overflow-y: auto;
  resize: vertical;
  padding-right: 2px;
}

/* 高さを変える取っ手。既定の描き方は地に沈んで見えないので、明るく描き直す */
.stage-col .stage-scene-list::-webkit-resizer {
  background:
    linear-gradient(135deg, transparent 46%, rgba(240, 231, 214, 0.85) 46%, rgba(240, 231, 214, 0.85) 54%, transparent 54%),
    linear-gradient(135deg, transparent 70%, rgba(240, 231, 214, 0.85) 70%, rgba(240, 231, 214, 0.85) 78%, transparent 78%);
}

/* 取っ手の場所が分かるように、下の縁へ明るい線を引く */
.stage-scene-resize {
  height: 9px;
  margin: -2px 0 8px;
  border-top: 1px solid rgba(240, 231, 214, 0.5);
  cursor: ns-resize;
  touch-action: none;
  display: grid;
  place-items: center;
}

.stage-scene-resize::after {
  content: "";
  width: 34px;
  height: 2px;
  background: rgba(240, 231, 214, 0.5);
  border-radius: 2px;
}

.stage-scene-resize:hover::after { background: var(--brass); }

.stage-col .stage-scene-chip { min-width: 0; width: 100%; }

.stage-col .stage-scene-meta { grid-template-columns: 1fr; }

.stage-col .stage-scene-actions { margin-bottom: 8px; }

/* ===== 舞台スケッチ: 文字を詰める =====
   道具の数が多く、パネルを畳んで縦を稼ぐ設計なので、
   ボタンの字も詰めて1行に収める。折り返しは作らない。 */

.stage-panel button,
.stage-panel .btn-quiet,
.stage-panel label,
.stage-seat-strip button,
.stage-center-bar button {
  font-size: 11px;
  letter-spacing: 0.04em;
}

.stage-panel .btn-quiet {
  padding: 6px 10px;
  white-space: nowrap;
}

.stage-io-row .btn-quiet,
.stage-io-row .stage-import-label {
  padding: 7px 6px;
  text-align: center;
  white-space: nowrap;
}

.stage-version-row .btn-quiet {
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* 操作・コマを置く・重なり操作のボタン */
.stage-tool-grid button,
.stage-piece-buttons button,
.stage-layer-actions button,
.stage-minor-action,
.stage-delete {
  min-height: 34px;
  font-size: 11px;
  letter-spacing: 0.02em;
  padding: 5px 6px;
}

/* シーンの操作は5つを一列に収める。詰めても折り返しはさせない
   （二段に折れると「足す三兄弟」の並びが読めなくなる） */
.stage-scene-actions {
  flex-wrap: nowrap;
  gap: 3px;
}

.stage-scene-actions button {
  min-height: 28px;
  padding: 3px 5px;
  font-size: 10px;
  letter-spacing: 0;
  white-space: nowrap;
  flex: 0 1 auto;
  min-width: 0;
}

/* 道具の帯の区切り。「動かす」と「背景」は別の仕事なので、
   線は引かずに余白だけで分ける（線を足すと帯が騒がしくなる） */
.stage-tool-split {
  width: 14px;
  flex: 0 0 auto;
}

/* 下段（セクション＋・削除）。上段と間を空けず、続きの段として見せる */
.stage-scene-actions-sub { margin-top: 3px; }

.stage-seat-strip .stage-seat {
  min-height: 28px;
  padding: 3px 10px;
  font-size: 10px;
}


.stage-center-bar button { min-height: 27px; padding: 3px 10px; font-size: 10px; }
.stage-center-bar .stage-name-toggle { min-height: 27px; padding: 3px 8px; font-size: 10px; }

/* 入力欄も同じ調子に揃える */
.stage-panel .stage-text-input,
.stage-panel .stage-select {
  min-height: 32px;
  font-size: 11.5px;
  padding: 5px 8px;
}

.stage-panel .stage-toggle {
  min-height: 32px;
  padding: 4px 8px;
  font-size: 11px;
}

.stage-panel .stage-field-label,
.stage-panel .stage-control-label {
  font-size: 9px;
  letter-spacing: 0.14em;
}

/* ===== 舞台スケッチ: 登場人物 ===== */

.stage-cast-hint {
  color: var(--milk-dim);
  font-size: 10px;
  line-height: 1.7;
  margin-bottom: 8px;
}

.stage-cast-add {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5px;
  margin-bottom: 9px;
}

.stage-cast-add .stage-text-input { margin-bottom: 0; }

/* 追加の口は一つ。名前は広く、種類と追加は下の段へ回す
   （左の列は狭いので、三つを一列に詰めると名前が読めなくなる） */
.stage-roster-add {
  grid-template-columns: minmax(0, 1fr) auto;
}

.stage-roster-add .stage-text-input { grid-column: 1 / -1; }

.stage-roster-add .stage-select {
  grid-column: 1;
  margin-bottom: 0;
  min-width: 0;
}

.stage-roster-add .btn-quiet { grid-column: 2; }

/* 種類ごとの小見出し。中身のある組だけ出す */
.stage-roster-group { margin-bottom: 10px; }
.stage-roster-group[hidden] { display: none; }

.stage-roster-head {
  margin: 0 0 5px;
  color: var(--brass);
  font-size: 10px;
  letter-spacing: 0.16em;
}

.stage-cast-list {
  display: grid;
  gap: 4px;
  margin-bottom: 10px;
  max-height: 260px;
  overflow-y: auto;
}

.stage-cast-empty {
  color: rgba(240, 231, 214, 0.34);
  font-size: 10px;
  line-height: 1.7;
}

.stage-cast-row {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 5px;
}

.stage-cast-color {
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--line-dark);
  background: none;
  cursor: pointer;
}

/* 一覧の名前。押して選ぶものなので、入力欄ではなくボタンの構えにする */
.stage-cast-name {
  min-width: 0;
  min-height: 28px;
  border: 1px solid transparent;
  background: none;
  color: var(--milk);
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  padding: 3px 5px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.stage-cast-name:hover { border-color: var(--brass); color: var(--paper); }
.stage-cast-name:focus-visible { border-color: var(--brass); outline: none; }

.stage-cast-name-input {
  min-width: 0;
  min-height: 28px;
  border: 1px solid transparent;
  background: none;
  color: var(--milk);
  font-family: var(--sans);
  font-size: 11.5px;
  padding: 3px 5px;
}

.stage-cast-name-input:hover { border-color: var(--line-dark); }
.stage-cast-name-input:focus { border-color: var(--brass); background: var(--desk-2); }

/* 舞台上か舞台裏かは、この場面での状態 */
.stage-cast-status {
  min-height: 24px;
  padding: 2px 8px;
  border: 1px solid var(--line-dark);
  background: none;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.stage-cast-status.is-on {
  color: var(--paper);
  border-color: var(--rust);
  background: rgba(168, 75, 38, 0.3);
}

.stage-cast-status.is-off { color: rgba(240, 231, 214, 0.4); }
.stage-cast-status:hover { border-color: var(--brass); }

.stage-cast-remove {
  min-width: 22px;
  min-height: 22px;
  border: 0;
  background: none;
  color: rgba(240, 231, 214, 0.3);
  font-size: 10px;
  line-height: 1;
}

.stage-cast-remove:hover { color: var(--rust); }

/* 絵を閉じてもバーは残す */
.stage-board-frame.is-closed {
  box-shadow: none;
  border-color: var(--line-dark);
}

.stage-board-frame.is-closed .stage-canvas-bar { padding: 9px 10px; }

/* 奥・手前のラベルは canvas の縁に置く。
   バーを常設したので、フレーム基準のままだと見出しと重なる。 */
.stage-canvas-wrap { position: relative; }

/* ===== 演者プロフィール ===== */

/* ★案内の暗幕（59）より上に置く。下に置くと、姿勢の窓のように
   案内の途中で開く窓が暗幕ごしになって、絵柄が読めなくなる。 */
.stage-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 7, 6, 0.72);
  z-index: 70;
}

.stage-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(380px, calc(100vw - 40px));
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  background: var(--desk-2);
  border: 1px solid var(--line-dark);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  z-index: 71;
}

/* ★窓ごとの幅は .stage-modal より後ろに置く。前に書くと、同じ強さの
   後出しに負けて既定の380pxに戻る（実際に姿勢の窓がそうなっていた）。 */
.stage-modal.stage-pose-modal { width: min(1020px, calc(100vw - 40px)); }
/* 照明プリセットの見本は、光の重なりと角度を読むための絵。
   380pxの窓に3列だと1枚100px弱しかなく、灯体の数も色の違いも潰れる。 */
.stage-modal#stage-light-preset-modal { width: min(820px, calc(100vw - 40px)); }
.stage-modal.stage-shows-modal { width: min(520px, calc(100vw - 40px)); }
.stage-modal.stage-beat-template-modal { width: min(780px, calc(100vw - 40px)); }
.stage-modal.stage-export-modal { width: min(420px, calc(100vw - 40px)); }
.stage-modal.stage-rehearsal-export-modal { width: min(560px, calc(100vw - 40px)); }
.stage-modal.stage-about-modal { width: min(720px, calc(100vw - 40px)); }
.stage-modal.stage-venue-editor-modal { width: min(980px, calc(100vw - 40px)); }

.stage-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--line-dark);
}

.stage-modal-head h2 {
  color: var(--milk);
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.stage-modal-close {
  border: 1px solid var(--line-dark);
  background: none;
  color: var(--milk-dim);
  min-width: 26px;
  min-height: 24px;
  font-size: 11px;
  line-height: 1;
}

.stage-modal-close:hover { color: var(--milk); border-color: var(--rust); }

.stage-modal-body { padding: 14px 16px 18px; }

/* ===== 会場エディタ: 形・観客・柱／什器／扉・天井（方式仕様 7章の1〜4） ===== */

.stage-venue-editor-modal .stage-modal-body {
  display: grid;
  gap: 10px;
}

.stage-venue-editor-lead,
.stage-venue-editor-boundary { margin: 0; }

.stage-venue-editor-shapes {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
}

.stage-venue-editor-modes {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
}

.stage-venue-editor-object-tools,
.stage-venue-editor-ceiling,
.stage-venue-editor-lines {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line-dark);
  background: rgba(25, 21, 18, 0.45);
}

.stage-venue-editor-object-tools {
  grid-template-columns: minmax(180px, 1fr) minmax(190px, auto) auto;
  align-items: center;
}

.stage-venue-editor-object-tools > p,
.stage-venue-editor-ceiling h3,
.stage-venue-editor-lines h3 {
  margin: 0;
  color: var(--milk);
  font-size: 11px;
  font-weight: 500;
}

.stage-venue-editor-object-tools .stage-toggle { margin: 0; }

.stage-venue-editor-setting {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  color: var(--milk-dim);
  font-size: 11px;
}

.stage-venue-editor-access-setting {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 92px minmax(0, 240px);
  align-items: center;
  gap: 8px;
  color: var(--milk-dim);
  font-size: 11px;
}

.stage-venue-editor-height-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.stage-venue-editor-ceiling-heights { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.stage-venue-editor-rigging { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.stage-venue-editor-lines-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.stage-venue-editor-lines-head > span {
  color: var(--milk-dim);
  font-size: 10px;
}

.stage-venue-editor-line-toggles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.stage-venue-editor-line-toggles label {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 6px 8px;
  border: 1px solid var(--line-dark);
  color: var(--milk);
  font-size: 11px;
  cursor: pointer;
}

.stage-venue-editor-line-toggles input { accent-color: var(--brass); }

.stage-venue-editor-probe-tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
}

.stage-venue-editor-probe-tools label {
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr) auto;
  align-items: center;
  gap: 8px;
  color: var(--milk-dim);
  font-size: 11px;
}

.stage-venue-editor-probe-tools input[type="range"] {
  width: 100%;
  accent-color: var(--brass);
}

.stage-venue-editor-probe-tools output {
  min-width: 3.2em;
  color: var(--milk);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.stage-venue-editor-probe-status {
  margin: 0;
  color: var(--milk-dim);
  font-size: 11px;
  line-height: 1.5;
}

.stage-venue-editor-probe-status.is-overlap {
  color: #ff6b61;
  font-weight: 700;
}

.stage-venue-editor-object-tools button:disabled,
.stage-venue-editor-object-tools input:disabled,
.stage-venue-editor-object-tools select:disabled {
  opacity: 0.38;
  cursor: default;
}

.stage-venue-editor-dims {
  margin: 0;
  color: var(--brass);
  font: 500 13px var(--serif);
  letter-spacing: 0.05em;
}

#stage-venue-editor-canvas {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(58vh, 640px);
  aspect-ratio: 3 / 2;
  border: 1px solid var(--line-dark);
  background: var(--desk);
  touch-action: none;
  user-select: none;
}

#stage-venue-editor-canvas:focus {
  outline: 1px solid var(--brass);
  outline-offset: 2px;
}

.stage-venue-editor-status {
  min-height: 1.5em;
  margin: 0;
  color: var(--milk-dim);
  font-size: 11px;
  line-height: 1.5;
}

.stage-venue-editor-audience {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) minmax(180px, auto) auto;
  align-items: center;
  gap: 8px;
}

.stage-venue-editor-audience p {
  margin: 0;
  color: var(--milk);
  font-size: 11px;
}

.stage-venue-editor-audience .stage-toggle { margin: 0; }

.stage-venue-editor-audience .btn-quiet {
  min-height: 36px;
  white-space: nowrap;
}

.stage-venue-editor-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.stage-venue-editor-actions span {
  flex: 1 1 auto;
  color: var(--milk-dim);
  font-size: 11px;
  text-align: right;
}

.stage-venue-editor-actions .stage-minor-action {
  min-width: 150px;
  border-color: var(--rust);
}

@media (max-width: 640px) {
  .stage-modal.stage-venue-editor-modal {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }

  .stage-venue-editor-shapes,
  .stage-venue-editor-modes,
  .stage-venue-editor-height-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .stage-venue-editor-object-tools { grid-template-columns: 1fr; }

  .stage-venue-editor-object-tools > *,
  .stage-venue-editor-setting,
  .stage-venue-editor-access-setting { grid-column: 1; }

  .stage-venue-editor-setting,
  .stage-venue-editor-access-setting { grid-template-columns: 1fr; }

  .stage-venue-editor-ceiling-heights { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .stage-venue-editor-line-toggles,
  .stage-venue-editor-probe-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .stage-venue-editor-probe-tools label { grid-column: 1 / -1; }

  .stage-venue-editor-audience {
    grid-template-columns: 1fr;
  }

  .stage-venue-editor-actions { align-items: stretch; flex-direction: column; }
  .stage-venue-editor-actions span { min-height: 1.4em; text-align: left; }
}

.stage-about-link {
  display: block;
  margin: 16px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--milk-dim);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.stage-about-link:hover { color: var(--milk); }

.stage-prefs-links {
  display: grid;
  margin-top: 16px;
  border-top: 1px solid var(--line-dark);
}

.stage-prefs-links .stage-about-link {
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 10px 2px;
  border-bottom: 1px solid var(--line-dark);
  text-align: left;
  text-decoration: none;
}

.stage-about-body {
  color: var(--milk-dim);
  font-size: 13px;
  line-height: 1.85;
}

.stage-about-copy { margin: 0 0 1.15em; }

.stage-about-credit {
  margin: 1.8em 0 0;
  padding-top: 1em;
  border-top: 1px solid var(--line-dark);
  color: var(--milk);
  font-family: var(--serif);
  letter-spacing: 0.12em;
}

.stage-modal-body .stage-control-label {
  display: block;
  color: var(--milk-dim);
  font-size: 9px;
  letter-spacing: 0.14em;
  margin: 10px 0 4px;
}

.stage-modal-body .stage-control-label:first-child { margin-top: 0; }

.stage-modal-body .stage-text-input {
  min-height: 34px;
  font-size: 12px;
  margin-bottom: 0;
}

.stage-modal-body textarea.stage-text-input {
  min-height: 62px;
  resize: vertical;
  line-height: 1.7;
}

.stage-modal-body input[type="range"] { width: 100%; }

/* パネルの中のつまみ。既定のままだと129pxで、列の半分しか使わない。
   ★色は地に合わせる。ブラウザ既定の青は、この画面では浮いてしまう。 */
.stage-panel-body input[type="range"] {
  width: 100%;
  display: block;
  margin: 2px 0 4px;
}

.view input[type="range"],
.stage-modal input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  accent-color: var(--rust);
  height: 20px;
  background: transparent;
}

/* 溝と摘みは自前で描く。既定のままだと溝が明るい灰で、暗い机の上に浮く。
   ★appearance:none を入れないと、この二つの擬似要素は Chrome に無視される */
.view input[type="range"]::-webkit-slider-runnable-track,
.stage-modal input[type="range"]::-webkit-slider-runnable-track {
  height: 3px;
  background: var(--line-dark);
}

.view input[type="range"]::-moz-range-track,
.stage-modal input[type="range"]::-moz-range-track {
  height: 3px;
  background: var(--line-dark);
}

.view input[type="range"]::-webkit-slider-thumb,
.stage-modal input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5.5px;
  border-radius: 50%;
  background: var(--rust);
  border: 1px solid rgba(240, 231, 214, 0.35);
}

.view input[type="range"]::-moz-range-thumb,
.stage-modal input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--rust);
  border: 1px solid rgba(240, 231, 214, 0.35);
}

.view input[type="range"]:disabled::-webkit-slider-thumb { background: var(--line-dark); }
.view input[type="range"]:disabled::-moz-range-thumb { background: var(--line-dark); }

/* ファイル書き出しの記録と勧め。保存欄の中の一行と小さな帯 */
.stage-backup-note {
  margin: 4px 0 0;
  color: rgba(240, 231, 214, 0.45);
  font-size: 10.5px;
  letter-spacing: 0.04em;
}

.stage-backup-hint {
  margin: 8px 0 2px;
  padding: 8px 10px;
  border: 1px solid rgba(168, 75, 38, 0.55);
  background: rgba(168, 75, 38, 0.08);
}

.stage-backup-hint p {
  margin: 0 0 6px;
  font-size: 11px;
  line-height: 1.6;
  color: var(--milk);
}

/* 選んだものの操作は一列にまとめる。縦に積むと、つまみより
   ボタンの方が場所を取って、何を触る欄なのか分からなくなる */
/* 横に並べるボタンの行。置く場所によって子の数が二つだったり三つだったりする。
   列を「38px＋2列」で固定すると、子が二つの行では先頭が38pxまで潰れ、
   字が一文字ずつ縦に折れて行だけが高くなる。実際に
   〈読み込む前に見比べる〉の窓・ポールの左右・トラピーズの座る／ぶら下がる が
   その形になっていた。子の数だけ等分の列を作る。 */
.stage-action-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 5px;
  margin-top: 10px;
}

/* 先頭が鍵などの小さな印のときだけ、その列を細くする */
.stage-action-row.is-icon-led {
  grid-auto-flow: row;
  grid-template-columns: 38px repeat(2, minmax(0, 1fr));
}

.stage-icon-action {
  min-height: 32px;
  border: 1px solid var(--line-dark);
  background: none;
  color: var(--milk-dim);
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  padding: 4px 6px;
  cursor: pointer;
}

.stage-icon-action:hover { color: var(--milk); border-color: var(--brass); }
.stage-icon-action[hidden] { display: none; }

.stage-icon-action[aria-pressed="true"] {
  border-color: var(--rust);
  background: rgba(168, 75, 38, 0.22);
  color: var(--paper);
}
.stage-modal-body input[type="color"] { width: 46px; height: 28px; padding: 0; border: 1px solid var(--line-dark); background: none; }

.stage-profile-hint {
  color: rgba(240, 231, 214, 0.36);
  font-size: 9.5px;
  line-height: 1.65;
  margin-top: 5px;
}

/* AI指示は一つの補助パネルとして、本文・質問・差分・実行情報の書体と強さをそろえる。 */
#stage-ask-panel,
#stage-ask-panel * {
  font-family: var(--sans);
}

#stage-ask-error,
#stage-ask-elapsed,
#stage-ask-draft-body,
#stage-ask-agent-info {
  color: rgba(240, 231, 214, 0.36);
  font-size: 9.5px;
  line-height: 1.65;
}

#stage-ask-error,
#stage-ask-elapsed { margin: 5px 0 0; }

#stage-ask-draft-body h3 {
  margin: 8px 0 2px;
  color: inherit;
  font-size: inherit;
  font-weight: 400;
  line-height: inherit;
}

#stage-ask-draft-body ul {
  margin: 0;
  padding-left: 1.5em;
}

#stage-ask-draft-body li {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.stage-rehearsal-export-open {
  width: 100%;
  min-height: 38px;
  margin: 8px 0 5px;
  border-style: dashed;
}

.stage-rehearsal-lead {
  margin: 0 0 10px;
  color: var(--milk-dim);
  font-size: 11px;
  line-height: 1.65;
}

.stage-rehearsal-check,
.stage-rehearsal-defaults,
.stage-rehearsal-omitted {
  margin: 8px 0 12px;
  padding: 10px 11px;
  border: 1px dashed rgba(240, 231, 214, 0.24);
  background: rgba(240, 231, 214, 0.025);
}

.stage-rehearsal-check.has-errors {
  border-color: rgba(168, 75, 38, 0.75);
  background: rgba(168, 75, 38, 0.09);
}

.stage-rehearsal-check.is-ready {
  border-color: rgba(119, 134, 95, 0.7);
  background: rgba(119, 134, 95, 0.08);
}

.stage-rehearsal-check-summary,
.stage-rehearsal-defaults > p,
.stage-rehearsal-omitted p {
  margin: 0;
  color: var(--milk);
  font-size: 11px;
  line-height: 1.6;
}

.stage-rehearsal-check ul,
.stage-rehearsal-omitted ul {
  margin: 7px 0 0;
  padding-left: 18px;
  color: var(--milk-dim);
  font-size: 10.5px;
  line-height: 1.65;
}

.stage-rehearsal-check li.is-error { color: #e6a18a; }
.stage-rehearsal-check li.is-warning { color: var(--brass); }

.stage-rehearsal-defaults .stage-rehearsal-time-grid { margin: 8px 0; }

.stage-rehearsal-defaults .stage-minor-action,
#stage-rehearsal-export-run {
  width: 100%;
  min-height: 38px;
}

.stage-rehearsal-unsupported {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0;
  padding: 9px 10px;
  border: 1px dashed rgba(168, 75, 38, 0.72);
  color: var(--milk);
  font-size: 11px;
  line-height: 1.5;
}

.stage-rehearsal-unsupported[hidden] { display: none; }

.stage-rehearsal-unsupported input {
  flex: 0 0 auto;
  margin-top: 2px;
}

.stage-rehearsal-omitted h3 {
  margin: 0 0 5px;
  color: var(--brass);
  font: 500 12px var(--serif);
  letter-spacing: 0.08em;
}

#stage-rehearsal-export-run {
  margin-top: 12px;
  border-color: var(--rust);
}

#stage-rehearsal-export-run:disabled {
  opacity: 0.42;
  cursor: default;
}

/* 一覧の行は 種類つき色見本・名前・舞台上/裏・錠・…・✕ の6列。
   演者も物も光も同じ形にして、目の高さを揃える */
.stage-cast-row {
  grid-template-columns: 24px minmax(0, 1fr) auto auto auto auto;
  gap: 4px;
}

/* 種類の絵と色を一つにまとめた見本。押すと色を選べる */
.stage-kind-swatch {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--line-dark);
  background: rgba(240, 231, 214, 0.05);
  cursor: pointer;
}

.stage-kind-swatch:hover { border-color: var(--brass); }

.stage-kind-glyph {
  display: block;
  width: 15px;
  height: 15px;
  color: inherit;
}

.stage-kind-glyph svg { width: 100%; height: 100%; fill: currentColor; display: block; }

/* 色を選ぶ口そのものは見せない。見本の上に重ねて、押せる範囲だけ borrowing する */
.stage-kind-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* 錠。掛けているあいだは舞台の上で掴んでも動かない */
.stage-cast-lock {
  min-width: 22px;
  min-height: 22px;
  border: 1px solid var(--line-dark);
  background: none;
  color: rgba(240, 231, 214, 0.4);
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
}

.stage-cast-lock:hover { color: var(--milk); border-color: var(--brass); }

.stage-cast-lock[aria-pressed="true"] {
  color: var(--paper);
  border-color: var(--rust);
  background: rgba(168, 75, 38, 0.24);
}

/* 「選んだもの」側の錠。掛かっているあいだは色を変えて知らせる */
.stage-lock-action[aria-pressed="true"] {
  border-color: var(--rust);
  background: rgba(168, 75, 38, 0.2);
  color: var(--paper);
}

.stage-cast-profile {
  min-width: 22px;
  min-height: 22px;
  border: 1px solid var(--line-dark);
  background: none;
  color: rgba(240, 231, 214, 0.45);
  font-size: 11px;
  line-height: 1;
}

.stage-cast-profile:hover { color: var(--milk); border-color: var(--brass); }

/* ===== 舞台スケッチ: 枠の高さを揃える =====
   文字欄32px・ボタン44px・シーンの操作31pxと三通りあり、同じ列に縦へ並べると
   段がそろわなかった。文字欄とボタンのちょうど中間、38pxへ寄せる。
   ★色見本・一覧の行の小さな印・見出し・「?」は対象外。あれは「枠」ではなく印で、
     同じ高さにすると行が間延びして、十数個並ぶ一覧が読めなくなる。 */
.stage-panel .stage-text-input,
.stage-panel .stage-select,
.stage-panel .stage-toggle,
.stage-panel .btn-quiet,
.stage-panel .stage-minor-action,
.stage-panel .stage-pose-button,
.stage-panel .stage-delete,
.stage-panel .stage-icon-action,
.stage-panel .stage-color-row input[type="color"],
.stage-panel .stage-scene-move button,
.stage-panel .stage-scene-actions button {
  min-height: 38px;
}

/* 背景の写真。地の色・塗りと同じ「背景」の項目に続けて置く */
.stage-photo-block {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--line-dark);
}

.stage-photo-block[hidden] { display: none; }

.stage-photo-pick {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  cursor: pointer;
}

.stage-photo-on { margin-top: 9px; }

/* 大きさの目安。容量はこの端末の保存を圧迫するので、黙らずに出す */
.stage-photo-note {
  margin: 6px 0 0;
  color: var(--milk-dim);
  font-size: 10px;
  line-height: 1.6;
}

/* 絵のバーは「名前｜（席）｜道具」の三つ。道具をひとまとめにして右へ寄せ、
   余白は真ん中だけに置く。ばらのまま space-between に任せると、
   余りが道具の間にも割られて、押す札がとびとびになる。 */
.stage-canvas-bar .stage-canvas-caption { flex: 0 0 auto; }

.stage-canvas-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.stage-canvas-bar .stage-seat-list {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}

.stage-canvas-bar .stage-seat-list[hidden] { display: none; }

/* バーの他の札（メモなど）と同じ調子にする */
.stage-canvas-bar .stage-seat {
  border: 1px solid var(--line-dark);
  background: none;
  color: var(--milk-dim);
  min-height: 26px;
  padding: 3px 9px;
  font-size: 10px;
  letter-spacing: 0.03em;
  line-height: 1;
  cursor: pointer;
}

.stage-canvas-bar .stage-seat:hover { color: var(--milk); border-color: var(--brass); }

.stage-canvas-bar .stage-seat[aria-pressed="true"] {
  color: var(--milk);
  border-color: var(--rust);
  background: rgba(168, 75, 38, 0.16);
}

/* 入れ替えは「どの絵を出すか」の続き。同じ群れの右端に置く */
.stage-view-switch #stage-swap-center { border-left: 1px solid var(--line-dark); }


/* 平面図の拡大ボタン。右下に小さく重ねる。絵の上の道具なので半透明の地 */
.stage-zoom-fab {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  z-index: 5;
}

.stage-zoom-fab button {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line-dark);
  background: rgba(13, 12, 11, 0.82);
  color: var(--milk);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.stage-zoom-fab button:hover { border-color: var(--brass); }
.stage-zoom-fab button:disabled { color: var(--line-dark); cursor: default; }


/* ---- ショー地図 ---- */
.stage-map-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.stage-map-cell {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(211, 172, 89, 0.25);
  border-radius: 4px;
  padding: 8px;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
}
.stage-map-cell:hover { border-color: rgba(211, 172, 89, 0.7); }
.stage-map-cell.is-current { border-color: #d3ac59; box-shadow: 0 0 0 1px #d3ac59 inset; }
.stage-map-cell canvas { width: 100%; height: auto; display: block; border-radius: 2px; }
.stage-map-title {
  margin: 6px 0 2px;
  font-size: 13px;
  color: rgba(239, 231, 214, 0.9);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stage-map-meta { margin: 0; font-size: 11px; color: rgba(239, 231, 214, 0.5); }
.stage-map-section {
  grid-column: 1 / -1;
  margin: 6px 0 0;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: rgba(211, 172, 89, 0.8);
  border-bottom: 1px solid rgba(211, 172, 89, 0.25);
  padding-bottom: 3px;
}


/* ---- 環境設定 ---- */
.stage-pref-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 2px;
  border-bottom: 1px solid rgba(211, 172, 89, 0.14);
}
.stage-pref-row input { margin-top: 3px; }
.stage-pref-name { font-size: 14px; color: rgba(239, 231, 214, 0.92); white-space: nowrap; }
.stage-pref-hint { font-size: 12px; color: rgba(239, 231, 214, 0.5); margin: 0; }
.stage-pref-caption-size {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 5px 0 0 10px;
  font-size: 11px;
  color: rgba(239, 231, 214, 0.66);
}
.stage-pref-caption-size-title { color: rgba(239, 231, 214, 0.48); }
.stage-pref-caption-size-option { display: inline-flex; align-items: center; gap: 3px; }
.stage-pref-caption-size-option input { margin: 0; }
.stage-pref-row.is-planned .stage-pref-name { color: rgba(239, 231, 214, 0.45); }
.stage-pref-tag {
  font-size: 10px;
  border: 1px solid rgba(211, 172, 89, 0.5);
  color: rgba(211, 172, 89, 0.8);
  padding: 1px 6px;
  border-radius: 3px;
  white-space: nowrap;
}
/* プレゼン（正面キャンバスの全画面） */
canvas:fullscreen { object-fit: contain; background: #000; }
canvas:-webkit-full-screen { object-fit: contain; background: #000; }

.stage-present-overlay { display: none; }

.stage-pseudo-present #stage-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  object-fit: contain;
  background: #000;
  z-index: 60;
}

.stage-pseudo-present .stage-present-overlay { display: block; }

.stage-present-zone {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 50%;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 12px;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.25);
  font-size: 28px;
  line-height: 1;
  z-index: 61;
  -webkit-tap-highlight-color: transparent;
}

.stage-present-zone.is-prev {
  left: 0;
  justify-content: flex-start;
}

.stage-present-zone.is-next {
  right: 0;
  justify-content: flex-end;
}

.stage-present-close {
  position: fixed;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 20px;
  line-height: 42px;
  text-align: center;
  z-index: 62;
  -webkit-tap-highlight-color: transparent;
}


/* ============ iPad PWA専用ワークスペース ============
   通常ブラウザには stage-pwa-tablet が付かないため、従来の三列画面を維持する。 */
html.stage-pwa-tablet,
html.stage-pwa-tablet body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

html.stage-pwa-tablet body {
  position: fixed;
  inset: 0;
}

html.stage-pwa-tablet #view-stage {
  width: 100%;
  height: 100dvh;
  padding:
    max(4px, env(safe-area-inset-top))
    max(4px, env(safe-area-inset-right))
    max(4px, env(safe-area-inset-bottom))
    max(4px, env(safe-area-inset-left));
  overflow: hidden;
}

html.stage-pwa-tablet .stage-sketch {
  display: grid;
  grid-template-rows: 52px minmax(0, 1fr);
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

html.stage-pwa-tablet .stage-sketch-head {
  min-height: 52px;
  margin: 0;
  padding: 0 6px 0 10px;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  border-bottom-color: rgba(156,130,63,0.45);
}

html.stage-pwa-tablet .stage-sketch-head h1 {
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.08em;
}

html.stage-pwa-tablet .stage-app-version {
  font-size: 9px;
  vertical-align: 0.12em;
}

html.stage-pwa-tablet .stage-beta { font-size: 9px; }
html.stage-pwa-tablet .stage-boundary-note { display: none; }

html.stage-pwa-tablet .stage-sketch-head > div:first-child {
  flex: 0 0 auto;
}

html.stage-pwa-tablet .stage-tablet-top-controls,
html.stage-pwa-tablet .stage-tablet-top-controls .stage-tool-grid,
html.stage-pwa-tablet .stage-tablet-top-controls .stage-history-actions {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 4px;
  min-width: 0;
}

html.stage-pwa-tablet .stage-tablet-top-controls {
  margin-left: auto;
}

html.stage-pwa-tablet .stage-tablet-top-controls button {
  flex: 0 0 44px;
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 3px;
  overflow: hidden;
  font-size: 0;
  text-overflow: clip;
  white-space: nowrap;
}

html.stage-pwa-tablet .stage-tablet-top-controls button::before {
  content: attr(data-tablet-icon);
  font-size: 17px;
}

html.stage-pwa-tablet .stage-tablet-top-controls #stage-lang {
  flex-basis: 52px;
  width: 52px;
  font-size: 9px;
}

html.stage-pwa-tablet .stage-tablet-top-controls #stage-lang::before { content: none; }

html.stage-pwa-tablet .stage-tablet-top-controls .stage-export {
  padding: 3px;
}

html.stage-pwa-tablet .stage-sketch-grid {
  display: grid;
  grid-template-columns: 58px 0 minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: none;
  gap: 0;
  min-width: 0;
  min-height: 0;
  height: 100%;
  align-items: stretch;
  overflow: hidden;
  transition: grid-template-columns 150ms ease;
}

html.stage-pwa-tablet .stage-sketch-grid.is-tablet-drawer-open {
  grid-template-columns: 58px clamp(280px, 32vw, 360px) minmax(0, 1fr);
}

html.stage-pwa-tablet .stage-toolbox,
html.stage-pwa-tablet .stage-inspector {
  display: none;
}

html.stage-pwa-tablet .stage-tablet-rail {
  grid-column: 1;
  grid-row: 1;
  z-index: 12;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 4px;
  border-right: 1px solid var(--line-dark);
  background: #14110e;
  overflow: hidden;
}

html.stage-pwa-tablet .stage-tablet-view-buttons {
  display: grid;
  gap: 3px;
}

/* PWAの操作中に、素早い二回タップをページ拡大として扱わせない。 */
html.stage-pwa-tablet,
html.stage-pwa-tablet body {
  touch-action: manipulation;
}

html.stage-pwa-tablet .stage-tablet-rail-separator {
  height: 1px;
  margin: 5px 4px;
  background: var(--line-dark);
}

html.stage-pwa-tablet .stage-tablet-rail-button {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1px;
  width: 50px;
  min-width: 50px;
  min-height: 48px;
  padding: 3px 2px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  color: var(--milk-dim);
  font-family: var(--sans);
  line-height: 1;
}

html.stage-pwa-tablet .stage-tablet-rail-button:hover,
html.stage-pwa-tablet .stage-tablet-rail-button[aria-pressed="true"] {
  border-color: var(--rust);
  background: rgba(168,75,38,0.22);
  color: var(--milk);
}

html.stage-pwa-tablet .stage-tablet-rail-icon {
  font-size: 19px;
  line-height: 1;
}

html.stage-pwa-tablet .stage-tablet-rail-label {
  max-width: 46px;
  overflow: hidden;
  font-size: 7.5px;
  letter-spacing: 0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.stage-pwa-tablet .stage-tablet-drawer {
  grid-column: 2;
  grid-row: 1;
  z-index: 11;
  display: grid;
  grid-template-rows: 48px minmax(0, 1fr) 48px;
  min-width: 0;
  min-height: 0;
  height: 100%;
  border-right: 1px solid var(--line-dark);
  background: #191512;
  overflow: hidden;
}

html.stage-pwa-tablet .stage-tablet-drawer[hidden] { display: none; }

html.stage-pwa-tablet .stage-tablet-drawer-head,
html.stage-pwa-tablet .stage-tablet-drawer-foot {
  display: grid;
  align-items: center;
  min-width: 0;
  border-bottom: 1px solid var(--line-dark);
}

html.stage-pwa-tablet .stage-tablet-drawer-head {
  grid-template-columns: minmax(0, 1fr) 48px;
  padding-left: 12px;
}

html.stage-pwa-tablet .stage-tablet-drawer-head h2 {
  min-width: 0;
  overflow: hidden;
  color: var(--brass);
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.stage-pwa-tablet .stage-tablet-drawer-head button,
html.stage-pwa-tablet .stage-tablet-drawer-foot button {
  min-width: 48px;
  min-height: 48px;
  border: 0;
  background: transparent;
  color: var(--milk-dim);
}

html.stage-pwa-tablet .stage-tablet-drawer-body {
  min-width: 0;
  min-height: 0;
  padding: 10px 12px;
  overflow: hidden;
}

html.stage-pwa-tablet .stage-tablet-drawer-foot {
  grid-template-columns: 1fr auto 1fr;
  border-top: 1px solid var(--line-dark);
  border-bottom: 0;
}

html.stage-pwa-tablet .stage-tablet-drawer-foot span {
  min-width: 52px;
  color: var(--milk-dim);
  font-size: 10px;
  text-align: center;
}

html.stage-pwa-tablet .stage-tablet-drawer-foot button:disabled {
  opacity: 0.24;
}

html.stage-pwa-tablet .stage-tablet-drawer-panel,
html.stage-pwa-tablet .stage-tablet-special-panel {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
}

html.stage-pwa-tablet .stage-tablet-drawer-panel > .stage-panel-head,
html.stage-pwa-tablet .stage-tablet-drawer-panel > .stage-panel-help {
  display: none;
}

html.stage-pwa-tablet .stage-tablet-drawer-panel > .stage-panel-body {
  display: block;
  height: 100%;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

html.stage-pwa-tablet .stage-tablet-panel-page {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

html.stage-pwa-tablet .stage-tablet-panel-page[hidden] { display: none; }

/* iPadでは指で使う枠を44pt以上にそろえる。小さな色見本だけは例外。 */
html.stage-pwa-tablet .stage-tablet-drawer button:not(.stage-swatches button),
html.stage-pwa-tablet .stage-tablet-drawer select,
html.stage-pwa-tablet .stage-tablet-drawer input[type="text"],
html.stage-pwa-tablet .stage-tablet-drawer input[type="number"],
html.stage-pwa-tablet .stage-tablet-drawer label.btn-quiet,
html.stage-pwa-tablet .stage-tablet-drawer .stage-toggle {
  min-height: 44px;
}

html.stage-pwa-tablet .stage-tablet-drawer .stage-scene-move,
html.stage-pwa-tablet .stage-tablet-drawer .stage-scene-resize {
  display: none;
}

html.stage-pwa-tablet .stage-tablet-drawer .stage-scene-list {
  display: block;
  width: 100%;
  height: auto !important;
  min-height: 0;
  max-height: none;
  padding: 0;
  overflow: hidden;
  resize: none;
}

html.stage-pwa-tablet .stage-tablet-drawer .stage-scene-row:not(.is-open) { display: none; }

html.stage-pwa-tablet .stage-tablet-display-menu {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}

html.stage-pwa-tablet .stage-center-bar { display: none; }
html.stage-pwa-tablet .stage-tablet-drawer [data-toggle-view] { display: none; }

html.stage-pwa-tablet .stage-board-column {
  grid-column: 3;
  grid-row: 1;
  display: grid;
  grid-template-rows: 48px minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 0;
  overflow: hidden;
}

html.stage-pwa-tablet .stage-tablet-scene-bar {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  align-items: center;
  min-width: 0;
  border-bottom: 1px solid var(--line-dark);
}

html.stage-pwa-tablet .stage-tablet-scene-bar button {
  min-width: 48px;
  min-height: 48px;
  border: 0;
  background: transparent;
  color: var(--milk-dim);
  font-size: 24px;
}

html.stage-pwa-tablet .stage-tablet-scene-bar .stage-tablet-scene-current {
  min-width: 0;
  overflow: hidden;
  color: var(--milk);
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: 0.05em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.stage-pwa-tablet .stage-tablet-scene-bar button:disabled { opacity: 0.24; }

html.stage-pwa-tablet .stage-canvas-stack {
  display: grid;
  /* 縦は上詰めにする。中央寄せ＋overflow:hiddenだと、内容が高さを超えたとき
     上下が均等に切られ、上端の操作列（見る位置のボタン）が潰れて押せなくなる。
     上詰めなら、あふれても切れるのは絵の下端だけで、操作は生きる。 */
  place-items: start center;
  align-content: start;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 6px;
  overflow: hidden;
}

html.stage-pwa-tablet .stage-board-frame {
  display: flex;
  flex-direction: column;
  /* 224px = 上部操作行56 + シーン送り48 + 見る位置の列52 + シーンの説明(1行)28
     + 余白。絵(16:9)の上に載る行の高さを引いてから幅を決める。144だと
     シーンの説明の分が計算に入っておらず、横向きで内容が縦にあふれていた。 */
  width: min(100%, calc((100dvh - 224px) * 16 / 9));
  max-width: 100%;
  max-height: 100%;
  margin: 0;
}

html.stage-pwa-tablet .stage-board-frame.is-closed { display: none; }

html.stage-pwa-tablet .stage-canvas-bar {
  flex: 0 0 52px;
  flex-wrap: nowrap;
  gap: 4px;
  min-height: 52px;
  padding: 4px 6px;
  overflow: hidden;
}

html.stage-pwa-tablet .stage-canvas-bar .stage-canvas-caption {
  margin: 0;
  font-size: 10px;
  white-space: nowrap;
}

html.stage-pwa-tablet .stage-canvas-bar .stage-seat-list,
html.stage-pwa-tablet .stage-canvas-bar .stage-canvas-tools {
  flex-wrap: nowrap;
  gap: 4px;
  margin: 0;
  min-width: 0;
}

html.stage-pwa-tablet .stage-canvas-bar .stage-seat {
  flex: 0 1 52px;
  min-width: 44px;
  min-height: 44px;
  padding: 3px 4px;
  font-size: 9px;
}

html.stage-pwa-tablet .stage-canvas-bar .stage-canvas-tool,
html.stage-pwa-tablet .stage-canvas-bar .stage-canvas-toggle {
  min-height: 44px;
  padding: 3px 5px;
  font-size: 9px;
  white-space: nowrap;
}

html.stage-pwa-tablet .stage-canvas-bar .stage-canvas-close { display: none; }

html.stage-pwa-tablet .stage-canvas-inner {
  min-width: 0;
  min-height: 0;
}

html.stage-pwa-tablet .stage-canvas-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
}

html.stage-pwa-tablet .stage-canvas-help { display: none; }

html.stage-pwa-tablet .stage-pose-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (orientation: portrait) {
  html.stage-pwa-tablet .stage-sketch-grid.is-tablet-drawer-open {
    grid-template-columns: 58px min(320px, 42vw) minmax(0, 1fr);
  }

  html.stage-pwa-tablet .stage-tablet-view-buttons {
    display: none;
  }

  html.stage-pwa-tablet .stage-canvas-stack {
    grid-template-rows: auto auto;
    place-items: stretch;
    align-content: start;
    gap: 4px;
    padding: 4px;
  }

  html.stage-pwa-tablet .stage-board-frame {
    width: 100%;
    max-height: none;
  }
}

/* ===== スマホ: JSONを読み込んで見るための簡易ワークスペース ===== */
html.stage-phone-viewer,
html.stage-phone-viewer body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
}

html.stage-phone-viewer body {
  position: fixed;
  inset: 0;
  padding: 0;
  background: #0d0c0b;
}

html.stage-phone-viewer .spine,
html.stage-phone-viewer .topnav,
html.stage-phone-viewer .stage-sketch-head,
html.stage-phone-viewer .stage-toolbox,
html.stage-phone-viewer .stage-inspector,
html.stage-phone-viewer .stage-scenes,
html.stage-phone-viewer .stage-center-bar,
html.stage-phone-viewer .stage-canvas-help,
html.stage-phone-viewer .stage-boundary-note,
/* 光の意図は書く側の道具。スマホは「読み込んで見る」ための画面なので、
   シーン一覧や道具箱と同じように隠す。
   ★出したままだと、要約の行がシーン送り（前へ／次へ）の上に重なって、
     場面を送れなくなる（作り手用の帯を前提に組んであるため）。 */
html.stage-phone-viewer .stage-light-intent,
html.stage-phone-viewer .stage-light-intent-compare,
html.stage-phone-viewer .stage-zoom-fab {
  display: none !important;
}

html.stage-phone-viewer #view-stage {
  display: block !important;
  width: 100%;
  height: 100dvh;
  min-height: 0;
  padding: 0 !important;
  overflow: hidden;
}

html.stage-phone-viewer .stage-sketch {
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  padding: max(0px, env(safe-area-inset-top))
    max(0px, env(safe-area-inset-right))
    max(0px, env(safe-area-inset-bottom))
    max(0px, env(safe-area-inset-left));
  overflow: hidden;
}

html.stage-phone-viewer .stage-sketch-grid {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

html.stage-phone-viewer .stage-board-column {
  position: relative;
  display: grid;
  grid-template-rows: 48px minmax(0, 1fr);
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

html.stage-phone-viewer .stage-phone-toolbar {
  z-index: 12;
  display: grid;
  grid-template-columns: 48px 44px minmax(0, 1fr) 44px 48px 60px;
  grid-template-rows: 48px;
  min-width: 0;
  border-bottom: 1px solid var(--line-dark);
  background: #15120f;
}

html.stage-phone-viewer .stage-phone-actions {
  display: contents;
}

html.stage-phone-viewer .stage-phone-button {
  min-width: 44px;
  min-height: 44px;
  padding: 3px 6px;
  border: 0;
  border-left: 1px solid rgba(240,231,214,0.1);
  background: transparent;
  color: var(--milk-dim);
  font-family: var(--sans);
  font-size: 11px;
}

html.stage-phone-viewer .stage-phone-button[aria-pressed="true"] {
  background: rgba(168,75,38,0.28);
  color: var(--paper);
}

html.stage-phone-viewer .stage-phone-button:disabled { opacity: 0.24; }

html.stage-phone-viewer .stage-phone-project {
  display: none;
}

html.stage-phone-viewer .stage-phone-scene-bar {
  display: contents;
}

html.stage-phone-viewer .stage-phone-scene-current {
  grid-column: 3;
  align-self: center;
  min-width: 0;
  padding: 0 8px;
  overflow: hidden;
  color: var(--milk);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.stage-phone-viewer .stage-phone-scene-bar .stage-phone-button {
  font-size: 26px;
  line-height: 1;
}

html.stage-phone-viewer .stage-phone-load { grid-column: 1; }
html.stage-phone-viewer .stage-phone-scene-prev { grid-column: 2; }
html.stage-phone-viewer .stage-phone-scene-next { grid-column: 4; }
html.stage-phone-viewer .stage-phone-info-toggle { grid-column: 5; }
html.stage-phone-viewer .stage-phone-note-toggle { grid-column: 6; }

html.stage-phone-viewer .stage-phone-load,
html.stage-phone-viewer .stage-phone-scene-prev,
html.stage-phone-viewer .stage-phone-scene-current,
html.stage-phone-viewer .stage-phone-scene-next,
html.stage-phone-viewer .stage-phone-info-toggle,
html.stage-phone-viewer .stage-phone-note-toggle { grid-row: 1; }

html.stage-phone-viewer .stage-phone-info {
  position: fixed;
  z-index: 30;
  top: calc(max(0px, env(safe-area-inset-top)) + 52px);
  right: max(8px, env(safe-area-inset-right));
  left: max(8px, env(safe-area-inset-left));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 10px;
  min-width: 0;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line-dark);
  background: #1a1612;
  box-shadow: 0 12px 28px rgba(0,0,0,0.55);
}

html.stage-phone-viewer .stage-phone-info[hidden],
html.stage-phone-viewer .stage-phone-source[hidden],
html.stage-phone-viewer .stage-phone-view-toggle[hidden] { display: none !important; }

html.stage-phone-viewer .stage-phone-source {
  position: fixed;
  z-index: 31;
  top: calc(max(0px, env(safe-area-inset-top)) + 52px);
  right: max(8px, env(safe-area-inset-right));
  left: max(8px, env(safe-area-inset-left));
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 64px;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--line-dark);
  background: #1a1612;
  box-shadow: 0 12px 28px rgba(0,0,0,0.55);
}

html.stage-phone-viewer .stage-phone-source strong {
  grid-column: 1 / -1;
  color: var(--brass);
  font-family: var(--serif);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
}

html.stage-phone-viewer .stage-phone-source .stage-phone-button {
  min-width: 0;
  border: 1px solid var(--line-dark);
}

html.stage-phone-viewer .stage-phone-info strong,
html.stage-phone-viewer .stage-phone-info span {
  min-width: 0;
  overflow: hidden;
  font-size: 10px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.stage-phone-viewer .stage-phone-info strong { color: var(--brass); }
html.stage-phone-viewer .stage-phone-info span { color: var(--milk-dim); text-align: right; }

html.stage-phone-viewer .stage-phone-info textarea {
  grid-column: 1 / -1;
  width: 100%;
  height: 44px;
  min-height: 44px;
  resize: none;
  padding: 6px 8px;
  border: 1px solid var(--line-dark);
  background: var(--desk);
  color: var(--milk);
  font: 12px/1.35 var(--sans);
}

html.stage-phone-viewer .stage-phone-file-input {
  position: fixed;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

html.stage-phone-viewer .stage-canvas-stack {
  display: grid;
  grid-template-rows: auto auto;
  place-items: stretch;
  align-content: start;
  min-width: 0;
  min-height: 0;
  height: 100%;
  gap: 3px;
  padding: 3px;
  overflow: hidden;
}

html.stage-phone-viewer .stage-board-frame {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: none;
  margin: 0;
  box-shadow: none;
}

html.stage-phone-viewer .stage-board-frame.is-closed { display: none; }

html.stage-phone-viewer .stage-canvas-bar {
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  left: 0;
  min-height: 30px;
  padding: 6px 8px;
  border-bottom: 0;
  background: linear-gradient(rgba(13,12,11,0.78), transparent);
  pointer-events: none;
}

html.stage-phone-viewer .stage-canvas-bar .stage-seat-list,
html.stage-phone-viewer .stage-canvas-bar .stage-canvas-tools { display: none; }

html.stage-phone-viewer .stage-canvas-bar .stage-canvas-caption {
  margin: 0;
  font-size: 9px;
}

html.stage-phone-viewer .stage-canvas-inner,
html.stage-phone-viewer .stage-canvas-wrap {
  min-width: 0;
  min-height: 0;
}

html.stage-phone-viewer .stage-canvas-wrap { width: 100%; aspect-ratio: 16 / 9; }

html.stage-phone-viewer #stage-canvas,
html.stage-phone-viewer #stage-plan-canvas {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

/* スマホの付箋入力は、指とキーボードで隠れにくい下端のシートにする。 */
html.stage-phone-viewer .stage-note-editor {
  position: fixed;
  z-index: 90;
  top: auto !important;
  right: max(8px, env(safe-area-inset-right));
  bottom: max(8px, env(safe-area-inset-bottom));
  left: max(8px, env(safe-area-inset-left)) !important;
  width: auto !important;
  min-width: 0;
}

html.stage-phone-viewer .stage-note-editor textarea { min-height: 72px; resize: none; }
html.stage-phone-viewer .stage-note-editor-bar .btn-quiet { min-height: 44px; min-width: 64px; }

@media (orientation: portrait) {
  html.stage-phone-viewer .stage-board-frame {
    width: 100%;
  }
}

@media (orientation: landscape) {
  html.stage-phone-viewer .stage-board-column {
    grid-template-columns: minmax(0, 1fr) 64px;
    grid-template-rows: minmax(0, 1fr);
  }

  html.stage-phone-viewer .stage-phone-toolbar {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    width: 64px;
    height: 100%;
    border-bottom: 0;
    border-left: 1px solid var(--line-dark);
  }

  html.stage-phone-viewer .stage-phone-actions,
  html.stage-phone-viewer .stage-phone-scene-bar {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  html.stage-phone-viewer .stage-phone-actions { flex: 4 1 0; }
  html.stage-phone-viewer .stage-phone-scene-bar { flex: 2 1 0; }

  html.stage-phone-viewer .stage-phone-toolbar .stage-phone-button {
    flex: 1 1 44px;
    width: 100%;
    min-height: 44px;
    border-left: 0;
    border-bottom: 1px solid rgba(240,231,214,0.1);
  }

  html.stage-phone-viewer .stage-phone-scene-current {
    position: fixed;
    z-index: 4;
    top: max(0px, env(safe-area-inset-top));
    right: calc(max(0px, env(safe-area-inset-right)) + 64px);
    left: max(0px, env(safe-area-inset-left));
    height: 32px;
    padding: 8px 42px 0;
    background: linear-gradient(rgba(13,12,11,0.72), transparent);
    pointer-events: none;
  }

  html.stage-phone-viewer .stage-canvas-stack {
    grid-column: 1;
    grid-row: 1;
    grid-template-rows: minmax(0, 1fr);
    place-items: center;
    justify-items: end;
    align-content: center;
    padding: 0;
  }

  html.stage-phone-viewer .stage-board-frame {
    width: min(100%, calc((100dvh - 2px) * 16 / 9));
  }

  html.stage-phone-viewer .stage-phone-info,
  html.stage-phone-viewer .stage-phone-source {
    top: calc(max(0px, env(safe-area-inset-top)) + 38px);
    right: calc(max(8px, env(safe-area-inset-right)) + 68px);
    left: auto;
    width: min(320px, calc(100vw - 84px));
  }
}


/* ---- 問答帳 ---- */
.mondo-log { margin-top: 26px; }
.mondo-log-entry {
  border: 1px solid rgba(211, 172, 89, 0.2);
  border-radius: 4px;
  padding: 8px 12px;
  margin-bottom: 8px;
}
.mondo-log-entry header { display: flex; gap: 10px; align-items: baseline; }
.mondo-log-entry header strong { flex: 1; font-size: 13px; }
.mondo-log-entry header span { font-size: 11px; opacity: 0.6; }
.mondo-log-entry p { margin: 4px 0 0; font-size: 13px; }
.mondo-log-axis { opacity: 0.65; font-size: 12px; }

/* ---- シーンの向きロックと一覧グリッド ---- */
.stage-facing-head {
  display: flex;
  align-items: center;
  gap: 6px;
}

.stage-facing-head .stage-control-label {
  flex: 1;
  margin: 0;
}

.stage-facing-lock {
  flex: 0 0 auto;
  min-width: 28px;
  min-height: 26px;
  padding: 2px 5px;
  border: 1px solid var(--line-dark);
  border-radius: 3px;
  background: none;
  color: var(--milk-dim);
  font-size: 13px;
  line-height: 1;
}

.stage-panel .stage-facing-lock { min-height: 26px; }

.stage-facing-lock:hover,
.stage-facing-lock:focus-visible { border-color: var(--brass); }

.stage-facing-lock[aria-pressed="true"] {
  border-color: var(--rust);
  background: rgba(168, 75, 38, 0.14);
  color: var(--milk);
}

.stage-scene-grid-open { grid-column: 1 / -1; }

/* シーンを見渡す窓は画面いっぱい近くまで使う。1180pxでは30場面級のショーで
   一覧の意味（全体を一目で掴む）が薄れた（2026-08-16 本人要望）。 */
.stage-modal.stage-scene-grid-modal {
  display: flex;
  flex-direction: column;
  width: calc(100vw - 24px);
  height: calc(100dvh - 24px);
  max-height: calc(100dvh - 24px);
  overflow: hidden;
}

.stage-scene-grid-head { flex: 0 0 auto; }

.stage-scene-grid-head-actions,
.stage-scene-grid-views {
  display: flex;
  align-items: center;
  gap: 5px;
}

.stage-scene-grid-views {
  padding: 2px;
  border: 1px solid var(--line-dark);
  border-radius: 3px;
}

.stage-scene-grid-views button {
  min-height: 26px;
  padding: 4px 9px;
  border: 1px solid transparent;
  border-radius: 2px;
  background: none;
  color: var(--milk-dim);
  font: inherit;
  font-size: 11px;
}

.stage-scene-grid-views button[aria-pressed="true"] {
  border-color: rgba(168, 75, 38, 0.72);
  background: rgba(168, 75, 38, 0.16);
  color: var(--milk);
}

.stage-scene-grid-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.stage-scene-grid {
  display: grid;
  /* 列幅はフェーダー（--scene-grid-size）で変える。既定220px */
  grid-template-columns: repeat(auto-fill, minmax(var(--scene-grid-size, 220px), 1fr));
  gap: 10px;
}

.stage-scene-grid-size {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--milk-dim);
  font-size: 11px;
}

.stage-scene-grid-size input { width: 130px; }

.stage-scene-grid-section {
  grid-column: 1 / -1;
  margin: 8px 0 0;
  padding: 7px 8px 6px var(--scene-indent, 8px);
  border-bottom: 1px solid rgba(211, 172, 89, 0.3);
  color: var(--brass);
  font-family: var(--serif);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.stage-scene-grid-card {
  display: grid;
  grid-template-rows: auto auto;
  min-width: 0;
  padding: 5px;
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: 3px;
  background: rgba(64, 54, 45, 0.34);
  color: var(--milk);
  text-align: left;
}

.stage-scene-grid-card:hover,
.stage-scene-grid-card:focus-visible { border-color: var(--brass); }

.stage-scene-grid-card.is-current {
  border-color: var(--rust);
  background: rgba(168, 75, 38, 0.1);
}

.stage-scene-grid-thumb {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(240, 231, 214, 0.08);
  border-radius: 2px;
  background: #0d0c0b;
}

.stage-scene-grid-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.stage-scene-grid-caption {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 7px;
  padding: 7px 3px 3px;
}

.stage-scene-grid-caption strong {
  overflow: hidden;
  font-size: 11.5px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stage-scene-grid-caption span {
  color: var(--milk-dim);
  font-size: 9.5px;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .stage-modal.stage-scene-grid-modal {
    width: calc(100vw - 12px);
    height: calc(100dvh - 12px);
    max-height: calc(100dvh - 12px);
  }

  .stage-scene-grid-head {
    align-items: flex-start;
    gap: 8px;
  }

  .stage-scene-grid-head-actions { align-items: stretch; }
  .stage-scene-grid-size input { width: 80px; }
  .stage-scene-grid-views button { padding-inline: 6px; }
  .stage-scene-grid-body { padding-inline: 10px; }
}

/* ===== 舞台スケッチ: セクションの色・一括開閉・後からまとめる =====
   字下げの空白だけでは親が途切れて見えるため、14pxごとの溝へ親の色を通す。 */
.stage-scene-head {
  /* 取っ手・名前の後ろへ、深さ2個・鉛筆・まとめるを一列で置く。
     色溝は行の左端へ敷くので、ここには持たない。 */
  grid-template-columns: 16px minmax(0, 1fr) repeat(4, auto);
}

/* 行の左に溝を空け、そこへバーを行の高さいっぱいに敷く。
   見出しの中の一列にすると、開いている背の高い行で線が途中で切れる。 */
.stage-scene-row {
  position: relative;
  padding-left: calc(3px + var(--scene-gutter, 0px));
}

.stage-scene-bars {
  position: absolute;
  left: 3px;
  top: 0;
  bottom: 0;
  width: var(--scene-gutter, 0px);
  pointer-events: none;
}

.stage-scene-bar-mark {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--bar-slot) * 14px + 5px);
  width: 3px;
  border-radius: 1px;
  opacity: 0.82;
}

.stage-scene-bar-mark.is-own {
  left: calc(var(--bar-slot) * 14px + 4px);
  width: 5px;
  opacity: 1;
}

/* 行の隙間（下の余白4px＋並びの隙間7px＋枠線2px＝13px）を跨いで、
   下の行のバーへ繋ぐ。幕の終わりの行には付けないので線は垂れない。 */
.stage-scene-bar-mark.is-linked {
  bottom: -13px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.stage-scene-chip.is-section .stage-scene-name {
  display: flex;
  align-items: center;
  gap: 6px;
}

.stage-scene-section-color {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.stage-scene-wrap {
  border: 1px solid transparent;
  border-radius: 2px;
  padding: 4px 5px;
  background: none;
  color: rgba(240, 231, 214, 0.5);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

.stage-scene-wrap:hover,
.stage-scene-wrap:focus-visible {
  border-color: rgba(211, 172, 89, 0.45);
  color: var(--brass);
}

.stage-scene-list.is-wrap-picking .stage-scene-chip:hover {
  border-color: rgba(211, 172, 89, 0.48);
  background: rgba(211, 172, 89, 0.09);
}

.stage-scene-list.is-wrap-picking .stage-scene-row.is-wrap-start {
  border-color: rgba(211, 172, 89, 0.52);
  background: rgba(211, 172, 89, 0.05);
}

/* 一覧と全開閉を同じ段へ置き、その下に従来の転換設定を保つ。 */
.stage-scene-grid-open,
#stage-scene-fold-all { grid-column: auto; }

.stage-scene-grid-section {
  padding: 0;
  border-left: 4px solid var(--section-color, var(--brass));
}

.stage-scene-grid-section-button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  padding: 7px 8px 6px var(--scene-indent, 8px);
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
}

.stage-scene-grid-section-button:hover,
.stage-scene-grid-section-button:focus-visible {
  background: rgba(211, 172, 89, 0.07);
  outline: none;
}

.stage-scene-grid-section-button > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stage-scene-grid-section-total {
  color: rgba(240, 231, 214, 0.46);
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* 自由矢印の設定は、描く正面図のすぐ上へだけ出す。小さい札を一つの帯にして、
   常設のメモ・照明の密度から浮かないようにする。 */
.stage-arrow-options {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 8px;
  min-width: 0;
  color: var(--milk-dim);
  font-size: 9.5px;
}

.stage-arrow-options[hidden],
.stage-arrow-depth-control[hidden] { display: none; }

.stage-arrow-choice,
.stage-arrow-depth-control,
.stage-arrow-color {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  white-space: nowrap;
}

.stage-arrow-choice button,
.stage-arrow-clear {
  min-height: 27px;
  padding: 3px 8px;
  border: 1px solid var(--line-dark);
  background: rgba(13, 12, 11, 0.18);
  color: var(--milk-dim);
  font-size: 9.5px;
  line-height: 1;
  cursor: pointer;
}

.stage-arrow-choice button + button { margin-left: -6px; }

.stage-arrow-choice button:hover,
.stage-arrow-clear:hover { color: var(--milk); border-color: var(--brass); }

.stage-arrow-choice button[aria-pressed="true"] {
  color: var(--paper);
  border-color: var(--rust);
  background: rgba(168, 75, 38, 0.24);
}

.stage-arrow-depth-control input[type="range"] { width: 76px; }

.stage-arrow-depth-control output {
  min-width: 3.2em;
  color: var(--brass);
  font-variant-numeric: tabular-nums;
}

.stage-arrow-color span { font-size: 0; }

.stage-arrow-color span::after {
  content: "↗";
  font-size: 13px;
  color: var(--brass);
}

.stage-arrow-color input[type="color"] {
  width: 30px;
  height: 27px;
  padding: 2px;
  border: 1px solid var(--line-dark);
  background: transparent;
}

.stage-arrow-clear:disabled {
  opacity: 0.3;
  cursor: default;
}

@media (max-width: 900px) {
  .stage-canvas-bar:has(.stage-arrow-options:not([hidden])) { flex-wrap: wrap; }
  .stage-canvas-bar:has(.stage-arrow-options:not([hidden])) .stage-canvas-tools {
    flex: 1 1 100%;
    flex-wrap: wrap;
  }
}

/* スマホ実機は舞台スケッチを「閲覧機」に切り替えるのが基本だが、
   書斎アプリ内タブから開くとその判定が効かず（standaloneStagePage
   ガードで対象外）、通常の編集UIがそのまま出る。道具列がnowrapで
   214〜490px要求し、375px画面からはみ出して横スクロールが生まれ、
   position:fixedの他要素の基準幅まで巻き込んで壊れていた
   （2026-08-18 発見）。既存の矢印中と同じ「バーごと折り返す」対処を
   常時にも広げる。 */
@media (max-width: 600px) {
  .stage-canvas-bar { flex-wrap: wrap; }
  .stage-canvas-bar .stage-canvas-tools {
    flex: 1 1 100%;
    flex-wrap: wrap;
    margin-left: 0;
    justify-content: flex-start;
  }
}

/* iPad横画面は図の高さを固定しているため、矢印中だけ他の正面操作を畳み、
   設定を横へ繰れる一列にする。 */
html.stage-pwa-tablet #stage-front-cell:has(.stage-arrow-options:not([hidden])) .stage-seat-list,
html.stage-pwa-tablet #stage-front-cell:has(.stage-arrow-options:not([hidden]))
  .stage-canvas-tools > :not(.stage-arrow-options):not(.stage-canvas-close) { display: none; }

html.stage-pwa-tablet .stage-arrow-options {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
}

html.stage-pwa-tablet .stage-arrow-choice button,
html.stage-pwa-tablet .stage-arrow-clear,
html.stage-pwa-tablet .stage-arrow-color input[type="color"] { min-height: 40px; }

/* セットビルダー。舞台スケッチ本体とは別の全画面作業台として重ねる。 */
.stage-roster-head-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.stage-roster-head-actions .btn-quiet { padding: 3px 8px; font-size: 11px; }
#stage-model-picker { min-width: 120px; max-width: 220px; }

.stage-model-builder {
  position: fixed;
  inset: 0;
  z-index: 10040;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  color: #e8e2d4;
  background: #100d0b;
  font-family: "Hiragino Sans", "Yu Gothic", sans-serif;
}
.stage-model-builder[hidden] { display: none; }
.stage-model-builder button,
.stage-model-builder input,
.stage-model-builder select,
.stage-model-builder textarea { font: inherit; }
.stage-model-builder-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(232,226,212,.2);
  background: #211a15;
}
.stage-model-builder-head h2 { margin: 0; font-size: 18px; }
.stage-model-builder-close,
.stage-model-actions button,
.stage-model-list button,
.stage-model-part-list button {
  border: 1px solid rgba(232,226,212,.24);
  border-radius: 5px;
  color: inherit;
  background: #2a221c;
  cursor: pointer;
}
.stage-model-builder-close { padding: 6px 12px; }
.stage-model-builder-body {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(190px, 23vw) minmax(320px, 1fr) minmax(240px, 27vw);
}
.stage-model-builder-side,
.stage-model-builder-preview { min-width: 0; min-height: 0; padding: 12px; }
.stage-model-builder-side { overflow: auto; background: #1a1512; }
.stage-model-builder-side.is-left { border-right: 1px solid rgba(232,226,212,.15); }
.stage-model-builder-side.is-right { border-left: 1px solid rgba(232,226,212,.15); }
.stage-model-builder h3 { margin: 0 0 10px; font-size: 15px; }
.stage-model-list,
.stage-model-part-list { display: grid; gap: 5px; margin-bottom: 10px; }
.stage-model-list button,
.stage-model-part-list button { width: 100%; padding: 7px 8px; text-align: left; }
.stage-model-list button.is-selected,
.stage-model-part-list button.is-selected { border-color: #d3ac59; background: #493620; color: #fff1c8; }
.stage-model-actions { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 14px; }
.stage-model-actions button { padding: 5px 8px; }
.stage-model-actions button.is-danger { color: #edb0a0; }
.stage-model-transfer { margin-top: 12px; }
.stage-model-builder textarea { width: 100%; box-sizing: border-box; resize: vertical; }
.stage-model-builder-preview { display: grid; grid-template-rows: auto minmax(0, 1fr); background: #171411; }
.stage-model-builder-preview canvas { width: 100%; height: 100%; min-height: 280px; touch-action: none; cursor: grab; }
.stage-model-builder-preview canvas:active { cursor: grabbing; }
.stage-model-controls { display: grid; gap: 7px; }
.stage-model-controls label { display: grid; grid-template-columns: minmax(70px, 1fr) minmax(80px, 1fr) auto; align-items: center; gap: 6px; }
.stage-model-controls input,
.stage-model-controls select,
.stage-model-builder textarea {
  min-width: 0;
  padding: 6px;
  border: 1px solid rgba(232,226,212,.25);
  border-radius: 4px;
  color: #efe7d6;
  background: #100d0b;
}
.stage-model-controls h4 { margin: 10px 0 2px; color: #d3ac59; font-size: 12px; }
.stage-model-controls i { color: rgba(232,226,212,.62); font-size: 11px; font-style: normal; }

@media (max-width: 820px) {
  .stage-model-builder-body { grid-template-columns: minmax(150px, 31vw) minmax(300px, 1fr); }
  .stage-model-builder-side.is-right { grid-column: 1 / -1; border-left: 0; border-top: 1px solid rgba(232,226,212,.15); }
  .stage-model-builder-body { overflow: auto; }
  .stage-model-builder-preview { min-height: 55vh; }
}