/* マス目プリントメーカー — 画面と紙の見た目
 * 色は藍1色と細い罫。道具の言葉は大人の日本語、紙の上だけ教科書体。
 */
:root {
  --paper: #fbfaf7;
  --white: #ffffff;
  --ink: #20242b;
  --ink-soft: #5a6069;
  --line: #d9d6ce;
  --line-dark: #b9b5aa;
  --ai: #29527a;
  --ai-soft: #eef3f8;
  --shu: #c3502b;
  --stage: #e9e7e1;
  --ui: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; overflow: hidden;
  font-family: var(--ui); font-size: 13px; line-height: 1.5; color: var(--ink);
  background: var(--stage);
  -webkit-text-size-adjust: 100%;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h3 { margin: 0; }

/* ---------- 上のバー ---------- */
.bar {
  height: 50px; display: flex; align-items: center; gap: 10px; padding: 0 14px;
  background: var(--white); border-bottom: 1px solid var(--line);
}
.bar .name { font-weight: 600; letter-spacing: .04em; color: var(--ai); white-space: nowrap; }
.bar .name small { margin-left: 8px; padding: 1px 6px; border: 1px solid var(--line-dark); border-radius: 3px; font-weight: 400; font-size: 11px; color: var(--ink-soft); letter-spacing: 0; }
.bar .title { width: 200px; min-width: 80px; flex: 0 1 200px; padding: 5px 8px; border: 1px solid transparent; border-radius: 4px; font-size: 14px; background: transparent; }
.bar .title:hover, .bar .title:focus { border-color: var(--line-dark); background: var(--white); outline: none; }
.bar select { padding: 5px 6px; border: 1px solid var(--line); border-radius: 4px; background: var(--white); max-width: 170px; }
.bar .paper-pick { display: flex; align-items: center; gap: 6px; color: var(--ink-soft); white-space: nowrap; }
.bar .paper-pick select { color: var(--ink); font-weight: 600; }
.bar .about-link { font-size: 12px; color: var(--ai); white-space: nowrap; }
.bar .sp { flex: 1; }
.cluster { display: flex; align-items: center; gap: 2px; padding-left: 10px; border-left: 1px solid var(--line); white-space: nowrap; }
.cluster.zoom #zoom-val { min-width: 44px; text-align: center; font-variant-numeric: tabular-nums; color: var(--ink-soft); }

.btn { padding: 6px 10px; border: 1px solid var(--line-dark); border-radius: 4px; background: var(--white); white-space: nowrap; }
.btn:hover { background: var(--ai-soft); border-color: var(--ai); }
.btn:disabled { opacity: .38; cursor: default; background: transparent; border-color: transparent; }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover:not(:disabled) { background: var(--ai-soft); }
.btn.sq { width: 30px; padding: 6px 0; }
.btn.primary { background: var(--ai); border-color: var(--ai); color: #fff; padding: 6px 16px; }
.btn.primary:hover { background: #1f4263; }
.btn.danger:hover { background: #fbeee9; border-color: var(--shu); color: var(--shu); }

/* ---------- 作業する場所 ---------- */
.work { display: flex; height: calc(100% - 50px); }

.tools { width: 74px; flex: none; padding: 8px 6px; overflow-y: auto; background: var(--white); border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.tools button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 2px 5px; border: 1px solid transparent; border-radius: 5px; background: transparent; font-size: 11px; color: var(--ink); }
.tools button:hover { background: var(--ai-soft); }
.tools button.on { background: var(--ai); color: #fff; }
.tools hr { width: 70%; margin: 5px auto; border: 0; border-top: 1px solid var(--line); }

.stage { flex: 1; min-width: 0; overflow: auto; padding: 36px 28px 60px; }
#pages { display: flex; flex-direction: column; align-items: center; gap: 34px; min-width: min-content; }
body.drawing .page, body.drawing .page * { cursor: crosshair !important; }

.panel { width: 284px; flex: none; overflow-y: auto; background: var(--white); border-left: 1px solid var(--line); padding-bottom: 40px; }
.ptitle { padding: 12px 14px 8px; font-size: 14px; font-weight: 600; color: var(--ai); border-bottom: 1px solid var(--line); }
.grp { padding: 10px 14px 12px; border-bottom: 1px solid var(--line); }
.grp h3 { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--ink-soft); letter-spacing: .06em; }
.row { display: grid; grid-template-columns: 88px 1fr; align-items: center; gap: 4px 8px; margin: 7px 0; }
.row.stack { grid-template-columns: 1fr; gap: 4px; }
.row.sub { display: block; margin: -2px 0 8px 96px; }
.row .lb { color: var(--ink); }
.row .ct { min-width: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.row .nt { grid-column: 2; font-size: 11px; color: var(--ink-soft); }
.row input[type="text"], .row select { width: 100%; padding: 5px 7px; border: 1px solid var(--line-dark); border-radius: 4px; background: var(--white); }
.row input[type="text"]:focus, .row select:focus, .num input:focus { outline: 2px solid var(--ai-soft); border-color: var(--ai); }
.num { display: inline-flex; align-items: center; gap: 4px; }
.num input { width: 64px; padding: 5px 4px 5px 7px; border: 1px solid var(--line-dark); border-radius: 4px; font-variant-numeric: tabular-nums; }
.num .unit { font-size: 11px; color: var(--ink-soft); }
.pair { display: flex; gap: 8px; }
.pair .num input { width: 54px; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chips button { padding: 2px 7px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); font-size: 11px; color: var(--ink-soft); }
.chips button:hover { border-color: var(--ai); color: var(--ai); }
.seg { display: inline-flex; border: 1px solid var(--line-dark); border-radius: 4px; overflow: hidden; }
.seg button { padding: 5px 9px; border: 0; border-left: 1px solid var(--line); background: var(--white); white-space: nowrap; }
.seg button:first-child { border-left: 0; }
.seg button:hover { background: var(--ai-soft); }
.seg button.on { background: var(--ai); color: #fff; }
.chk { display: flex; align-items: flex-start; gap: 7px; margin: 7px 0; cursor: pointer; }
.chk input { margin: 3px 0 0; accent-color: var(--ai); }
.sw { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.sw button { width: 22px; height: 22px; padding: 0; border: 1px solid rgba(0,0,0,.25); border-radius: 50%; }
.sw button.none { background: linear-gradient(135deg, #fff 45%, var(--shu) 46%, var(--shu) 54%, #fff 55%); }
.sw button.on { outline: 2px solid var(--ai); outline-offset: 2px; }
.btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.btns .btn { padding: 5px 9px; }
.hint { margin: 6px 0; font-size: 11.5px; line-height: 1.6; color: var(--ink-soft); }
.hint.err { color: var(--shu); }
.hint.pad { padding: 8px 14px 0; }
.howto { margin: 0; padding: 0; list-style: none; }
.howto li { margin: 0 0 8px; font-size: 12px; line-height: 1.65; color: var(--ink); }
.howto b { display: inline-block; min-width: 3.2em; margin-right: 6px; color: var(--ai); font-weight: 600; }

.toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px); max-width: 80vw; padding: 9px 16px; border-radius: 5px; background: rgba(32,36,43,.94); color: #fff; font-size: 13px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 50; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* 見えない入力らん。マス目に打つ字はここで受ける */
#ime { position: fixed; left: 0; top: 0; width: 2px; height: 22px; padding: 0; margin: 0; border: 0; outline: 0; resize: none; overflow: hidden; opacity: 0; font-size: 16px; line-height: 22px; white-space: pre; pointer-events: none; z-index: 1; background: transparent; color: transparent; caret-color: transparent; }

/* ---------- 紙 ---------- */
.page-wrap { position: relative; flex: none; }
.page { position: absolute; left: 0; top: 0; background: #fff; transform-origin: 0 0; box-shadow: 0 1px 3px rgba(0,0,0,.2), 0 10px 28px rgba(0,0,0,.09); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.guide { position: absolute; border: 1px dashed rgba(41,82,122,.28); pointer-events: none; }
.page-tag { position: absolute; left: 0; top: -24px; display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.page-tag button { padding: 1px 8px; border: 1px solid var(--line-dark); border-radius: 3px; background: transparent; font-size: 11px; color: var(--ink-soft); }
.page-tag button:hover { border-color: var(--shu); color: var(--shu); }
.add-page { padding: 9px 22px; border: 1px dashed var(--line-dark); border-radius: 5px; background: transparent; color: var(--ink-soft); }
.add-page:hover { border-color: var(--ai); color: var(--ai); background: rgba(255,255,255,.5); }

/* ---------- 部品 ---------- */
.blk { position: absolute; user-select: none; -webkit-user-select: none; }
.blk svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; display: block; }

/* マス目 */
.masu .cells { position: absolute; left: 0; top: 0; width: 100%; height: 100%; font-feature-settings: "palt" 0; }
.masu { cursor: text; }
.mc { position: absolute; display: flex; align-items: center; justify-content: center; line-height: 1; white-space: nowrap; overflow: visible; }
.masu.v .mc { writing-mode: vertical-rl; text-orientation: mixed; }
.mc .ch { display: inline-block; line-height: 1; }
.mc .up { text-orientation: upright; }
.mc .tcy { text-combine-upright: all; -webkit-text-combine: horizontal; }
/* 「。」と「」」を1マスに。字送りを半分にして、字形の中のインクがある側だけを使う */
.masu.v .mc .hf { display: inline-block; height: .5em; line-height: 1; }
.masu.h .mc .hf { display: inline-block; width: .5em; line-height: 1; }
/* 行のはじめに来た句読点を、前の行の最後のマスに入れる */
.mc .hang { position: absolute; line-height: 1; white-space: nowrap; }
.masu.v .mc .hang.in { font-size: .58em; right: .14em; bottom: -.22em; }
.masu.h .mc .hang.in { font-size: .58em; right: -.22em; bottom: .12em; }
.masu.v .mc .hang.in.multi { bottom: .02em; }
.masu.h .mc .hang.in.multi { right: .1em; }
.mc .pair { font-size: .92em; letter-spacing: -.02em; }
.masu.v .mc.has-hang .ch { transform: translate(-7%, -9%) scale(.86); }
.masu.h .mc.has-hang .ch { transform: translate(-9%, -7%) scale(.86); }
.masu.v .mc .hang.out { top: 100%; left: 50%; transform: translateX(-50%); }
.masu.h .mc .hang.out { left: 100%; top: 50%; transform: translateY(-50%); }
.masu .marks { pointer-events: none; }
.masu .ov { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.selcell { position: absolute; background: rgba(41,82,122,.2); }
.compcell { position: absolute; background: rgba(195,80,43,.12); box-shadow: inset 0 0 0 .3mm rgba(195,80,43,.5); }
.caret { position: absolute; background: var(--ai); animation: blink 1.06s steps(1) infinite; }
.caret.idle { animation: none; opacity: .45; }
@keyframes blink { 50% { opacity: 0; } }
.overflow { position: absolute; left: 0; top: 100%; margin-top: 4px; padding: 2px 8px; border-radius: 3px; background: var(--shu); color: #fff; font: 12px/1.6 var(--ui); white-space: nowrap; }

/* 文字 */
.blk.text { cursor: text; }
.tx { width: 100%; min-height: 100%; outline: none; white-space: pre-wrap; overflow-wrap: anywhere; line-break: strict; word-break: normal; overflow: visible; }
.blk.text.v .tx { width: auto; min-width: 100%; height: 100%; min-height: 0; position: absolute; right: 0; top: 0; }
.tx:empty::before { content: "ここに文字を入れます"; color: #b4b4b4; }
.tx[contenteditable="true"] { user-select: text; -webkit-user-select: text; cursor: text; }

/* 線と図形は、線の上だけをつかめる */
.blk.line, .blk.rect { pointer-events: none; }
.blk.line .hit, .blk.rect .hit { pointer-events: stroke; cursor: move; }
.blk.rect .solid { pointer-events: all; cursor: move; }

.blk.hissan, .blk.shiki, .blk.image { cursor: move; }
.blk.image img { width: 100%; height: 100%; display: block; object-fit: fill; pointer-events: none; }
.hissan-err { padding: 4px 8px; border: 1px dashed var(--shu); border-radius: 3px; color: var(--shu); font: 12px/1.5 var(--ui); background: #fff; }

/* 式 */
.sk { display: inline-flex; align-items: center; white-space: nowrap; line-height: 1.2; padding: .1em 0; }
.sk-op { margin: 0 .32em; }
.sk-paren { margin: 0 .04em; }
.sk-whole { margin-right: .1em; }
.sk-text { margin: 0 .1em; }
.sk-frac { display: inline-flex; flex-direction: column; align-items: stretch; text-align: center; margin: 0 .12em; line-height: 1.15; }
.sk-frac .sk-part { padding: 0 .22em; display: flex; justify-content: center; align-items: center; min-height: 1.15em; }
.sk-frac .sk-bar { height: 0; border-top: .06em solid currentColor; margin: .06em 0; }
.sk-box { display: inline-block; height: 1.25em; border: .06em solid currentColor; margin: 0 .1em; vertical-align: middle; background: #fff; }
.sk-box.small { height: 1.05em; margin: .08em 0; }
.sk-empty { font: 12px var(--ui); color: #b4b4b4; }

/* ---------- 選んでいる部品のわく ---------- */
.selbox { position: absolute; border: 1px solid var(--ai); pointer-events: none; z-index: 20; }
.selbox.editing { border-style: dashed; }
.selbox .edge { position: absolute; pointer-events: auto; cursor: move; }
.selbox .edge.n { left: 0; right: 0; top: -5px; height: 9px; }
.selbox .edge.s { left: 0; right: 0; bottom: -5px; height: 9px; }
.selbox .edge.w { top: 0; bottom: 0; left: -5px; width: 9px; }
.selbox .edge.e { top: 0; bottom: 0; right: -5px; width: 9px; }
.selbox .grip { position: absolute; left: -1px; top: -24px; height: 22px; padding: 0 8px 0 6px; display: flex; align-items: center; gap: 5px; border-radius: 4px 4px 0 0; background: var(--ai); color: #fff; font: 11px/1 var(--ui); white-space: nowrap; pointer-events: auto; cursor: move; }
.selbox .h { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border: 1.5px solid var(--ai); border-radius: 2px; background: #fff; pointer-events: auto; }
.selbox .h.round { border-radius: 50%; cursor: crosshair; }
.selbox .h.nw { left: 0; top: 0; cursor: nwse-resize; }
.selbox .h.n { left: 50%; top: 0; cursor: ns-resize; }
.selbox .h.ne { left: 100%; top: 0; cursor: nesw-resize; }
.selbox .h.e { left: 100%; top: 50%; cursor: ew-resize; }
.selbox .h.se { left: 100%; top: 100%; cursor: nwse-resize; }
.selbox .h.s { left: 50%; top: 100%; cursor: ns-resize; }
.selbox .h.sw { left: 0; top: 100%; cursor: nesw-resize; }
.selbox .h.w { left: 0; top: 50%; cursor: ew-resize; }

/* ---------- せまい画面 ---------- */
@media (max-width: 1100px) {
  .bar .name small, #zoom-fit { display: none; }
  .bar .title { flex-basis: 140px; }
  .panel { width: 264px; }
}
@media (max-width: 820px) {
  .bar { overflow-x: auto; }
  .panel { position: fixed; right: 0; top: 50px; bottom: 0; box-shadow: -6px 0 18px rgba(0,0,0,.12); z-index: 30; }
  .stage { padding-right: 280px; }
}

/* 確認用の画像を撮るとき（tests/render.mjs）は、画面だけの線を消す */
body.shot .no-print, body.shot .toast { display: none !important; }
body.shot .page { box-shadow: none; }

/* ---------- 印刷 ---------- */
@media print {
  html, body { height: auto; overflow: visible; background: #fff; }
  .bar, .tools, .panel, .toast, #ime, .no-print { display: none !important; }
  .work { display: block; height: auto; }
  .stage { overflow: visible; padding: 0; }
  #pages { display: block; min-width: 0; }
  .page-wrap { width: auto !important; height: auto !important; break-after: page; page-break-after: always; }
  .page-wrap:last-of-type { break-after: auto; page-break-after: auto; }
  .page { position: relative; transform: none !important; box-shadow: none; overflow: hidden; }
  .blk.text.v .tx { width: auto; min-width: 100%; height: 100%; min-height: 0; position: absolute; right: 0; top: 0; }
.tx:empty::before { content: ""; }
}

/* マス目プリントメーカー：あとから足した部分（同梱の字、選ぶ画面、画像を落とす場所、はじめの画面） */

/* 教科書体が入っていないパソコンのための字。SIL Open Font License（assets/fonts/OFL.txt） */
/* 軽い版（かな、記号、JIS第1水準の漢字 約3,600字。1.3MB）を先に使い、そこにない字が出たときだけ、全部入りの版（3MB）を読む */
@font-face { font-family: "Klee One"; font-weight: 400; font-style: normal; font-display: swap; src: local("Klee One Regular"), local("KleeOne-Regular"), url("fonts/KleeOne-Regular.core.woff2") format("woff2"); }
@font-face { font-family: "Klee One"; font-weight: 600 700; font-style: normal; font-display: swap; src: local("Klee One SemiBold"), local("KleeOne-SemiBold"), url("fonts/KleeOne-SemiBold.core.woff2") format("woff2"); }
@font-face { font-family: "Klee One Full"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/KleeOne-Regular.woff2") format("woff2"); }
@font-face { font-family: "Klee One Full"; font-weight: 600 700; font-style: normal; font-display: swap; src: url("fonts/KleeOne-SemiBold.woff2") format("woff2"); }

/* ---------- 選ぶ画面 ---------- */
.dlg { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(32,36,43,.38); }
.dlg-box { display: flex; flex-direction: column; width: min(640px, 100%); max-height: min(720px, 100%); background: var(--white); border: 1px solid var(--line-dark); border-radius: 6px; box-shadow: 0 12px 40px rgba(0,0,0,.22); }
.dlg-box.wide { width: min(980px, 100%); max-height: min(860px, 100%); }
.dlg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 12px 18px; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--ai); }
.dlg-body { display: flex; flex-direction: column; min-height: 0; padding: 14px 18px 16px; }
.dlg-tools { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.dlg-filter { flex: 1; padding: 7px 10px; border: 1px solid var(--line-dark); border-radius: 4px; }
.dlg-count { min-width: 48px; text-align: right; font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.dlg-list { flex: 1; min-height: 120px; overflow: auto; border: 1px solid var(--line); border-radius: 4px; }
.dlg-item { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: 12px; width: 100%; padding: 8px 12px; border: 0; border-bottom: 1px solid var(--line); background: var(--white); text-align: left; }
.dlg-item:hover, .dlg-item:focus-visible { background: var(--ai-soft); }
.dlg-item .fn { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dlg-item .fs { font-size: 19px; line-height: 1.4; overflow: hidden; white-space: nowrap; }
.dlg-foot { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.dlg-foot .hint { flex: 1; margin: 0; }

/* ---------- 画像を落とす場所 ---------- */
body.dropping .stage { outline: 3px dashed var(--ai); outline-offset: -10px; background: var(--ai-soft); }

/* ---------- はじめの画面（ひな形を絵で見て選ぶ） ---------- */
.dlg-body.st { overflow: auto; }
.st-lead { margin: 0 0 4px; font-size: 13px; color: var(--ink-soft); }
.st h3 { margin: 16px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--ink-soft); }
.st h3:first-of-type { margin-top: 6px; }
.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 16px 14px; }
.st-card { display: flex; flex-direction: column; gap: 4px; padding: 0; border: 0; background: transparent; text-align: left; }
.st-thumb { display: block; aspect-ratio: 1 / 1; border: 1px solid var(--line-dark); background: #f6f5f1; overflow: hidden; }
.st-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.st-blank { display: block; width: 62%; height: 86%; margin: 7% auto; background: var(--white); border: 1px solid var(--line); }
.st-card:hover .st-thumb, .st-card:focus-visible .st-thumb { border-color: var(--ai); box-shadow: 0 0 0 2px var(--ai-soft); }
.st-card.make .st-thumb { border-color: var(--ai); }
.st-name { margin-top: 4px; font-size: 13px; font-weight: 600; line-height: 1.5; word-break: auto-phrase; }
.st-note { font-size: 11.5px; line-height: 1.6; color: var(--ink-soft); word-break: auto-phrase; }

/* ---------- 計算プリントを作る ---------- */
.dlg-body.ks { overflow: auto; }
.ks-cols { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 24px; }
.ks-lb { margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.ks-exprs { width: 100%; padding: 8px 10px; border: 1px solid var(--line-dark); border-radius: 4px; font-size: 15px; line-height: 1.7; font-variant-numeric: tabular-nums; resize: vertical; }
.ks-rand { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ks-rand select, .ks-row select, .ks-row input { padding: 6px 8px; border: 1px solid var(--line-dark); border-radius: 4px; background: var(--white); }
.ks-row { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); align-items: center; gap: 8px; margin-bottom: 9px; font-size: 13px; }
.ks-right .chk { margin-top: 4px; }
.ks-info { margin: 14px 0 0; padding: 9px 12px; background: var(--ai-soft); color: var(--ink); }
@media (max-width: 760px) { .ks-cols { grid-template-columns: 1fr; } }

/* ---------- 上のリボン（選んだ部品の設定） ----------
 * 右の設定らんをやめて、上のバーのすぐ下に横長に置く。わくごとに3段で並べ、わくの名前は下に出す。 */
:root { --ribbon-h: 118px; }
.work { height: calc(100% - 50px - var(--ribbon-h)); }
.panel.ribbon { width: auto; height: var(--ribbon-h); display: flex; align-items: stretch; overflow-x: auto; overflow-y: hidden; padding: 0; background: var(--white); border-left: 0; border-bottom: 1px solid var(--line-dark); scrollbar-width: thin; }
.ribbon .rb-wrap { display: contents; }
.ribbon .ptitle { flex: none; width: 66px; padding: 0 6px; display: flex; align-items: center; justify-content: center; text-align: center; border-bottom: 0; border-right: 1px solid var(--line); background: var(--ai-soft); font-size: 13px; line-height: 1.4; }
.ribbon .grp { flex: none; position: relative; margin: 0; padding: 7px 11px 21px; border: 0; border-right: 1px solid var(--line); }
.ribbon .grp h3 { position: absolute; left: 0; right: 0; bottom: 4px; margin: 0; text-align: center; font-size: 10.5px; font-weight: 500; letter-spacing: .04em; white-space: nowrap; }
.ribbon .grp-body { display: grid; grid-auto-flow: column; grid-template-rows: repeat(3, 28px); gap: 2px 12px; align-items: center; justify-items: start; }
.ribbon .row, .ribbon .row.stack { display: flex; flex-direction: row; align-items: center; gap: 7px; margin: 0; white-space: nowrap; }
.ribbon .row .lb { font-size: 11.5px; color: var(--ink-soft); }
.ribbon .row .nt, .ribbon .row.sub, .ribbon .hint, .ribbon .howto { display: none; }
.ribbon .chk { margin: 0; white-space: nowrap; font-size: 12px; }
.ribbon .num input { width: 54px; padding: 3px 3px 3px 6px; }
.ribbon select { max-width: 190px; padding: 3px 4px; }
.ribbon input[type="text"] { width: 150px; padding: 3px 6px; }
.ribbon .seg button { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; font-size: 12px; }
.ribbon .btns { display: flex; gap: 4px; margin: 0; }
.ribbon .btn { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; font-size: 12px; }
.ribbon .sw button { width: 20px; height: 20px; }
/* 「部品」のわくの複製や削除は、部品のすぐ上の小さなバーにあるので、ここでは出さない */
.ribbon > .grp:last-child .btns { display: none; }
/* 押すと下に開くわく */
.ribbon .grp.fold { padding: 7px 8px 7px; display: flex; align-items: center; }
.ribbon .grp.fold > h3 { display: none; }
.fold-btn { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 86px; padding: 8px 8px 6px; border: 1px solid transparent; border-radius: 5px; background: transparent; font-size: 11.5px; color: var(--ink); white-space: nowrap; }
.fold-btn:hover, .grp.fold.open .fold-btn { background: var(--ai-soft); border-color: var(--ai); color: var(--ai); }
.fold-btn .caret { font-size: 9px; line-height: 1; color: var(--ink-soft); }
.ribbon .grp.fold .grp-body { display: none; }
.ribbon .grp.fold.open .grp-body { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; position: fixed; z-index: 60; padding: 14px 16px; background: var(--white); border: 1px solid var(--line-dark); border-radius: 6px; box-shadow: 0 8px 28px rgba(0,0,0,.18); }
.ribbon .grp.fold.open .grp-body select { max-width: none; }
.ribbon .grp.fold.open .grp-body .hint { display: block; max-width: 300px; margin: 0; white-space: normal; }
.ui-ic { flex: none; display: block; }
.seg button.on .ui-ic { color: inherit; }
/* 何も選んでいないときの案内 */
.rb-tip { flex: 1; min-width: 260px; display: flex; align-items: center; gap: 14px; padding: 0 18px; font-size: 12.5px; line-height: 1.7; color: var(--ink-soft); }
.rb-tip b { color: var(--ai); font-weight: 600; }
.rb-tip .btn { flex: none; }
/* 使い方の画面 */
.help-body { overflow: auto; font-size: 13px; line-height: 1.8; }
.help-body h3 { margin: 14px 0 6px; font-size: 13px; color: var(--ai); }
.help-body h3:first-child { margin-top: 0; }
.help-body ul { margin: 0; padding-left: 1.2em; }
.help-body li b { display: inline-block; min-width: 3.4em; color: var(--ai); }

/* ---------- 選んだ部品のすぐ上に出る小さなバー ---------- */
.float-bar { position: absolute; z-index: 30; display: flex; gap: 2px; padding: 3px; background: var(--white); border: 1px solid var(--line-dark); border-radius: 7px; box-shadow: 0 3px 12px rgba(0,0,0,.16); white-space: nowrap; transform-origin: left bottom; }
.float-bar button { display: flex; align-items: center; gap: 4px; padding: 4px 7px; border: 0; border-radius: 4px; background: transparent; font-size: 11.5px; color: var(--ink); }
.float-bar button:hover { background: var(--ai-soft); color: var(--ai); }
.float-bar button.danger:hover { background: #fdecea; color: #c0281c; }
.float-bar .sep { width: 1px; margin: 3px 2px; background: var(--line); }
@media print { .float-bar { display: none !important; } }

/* せまい画面では、アイコンのあるボタンの字をかくす（名前は、マウスをのせると出る） */
@media (max-width: 1460px) {
  .ribbon .seg .ui-ic + .bl { display: none; }
  .ribbon .seg button { padding: 4px 8px; }
  .fold-btn { min-width: 70px; }
}

/* ---------- ページを足すボタン ---------- */
.add-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.add-copy { border-style: solid; border-color: var(--ai); color: var(--ai); background: rgba(255,255,255,.6); }

@media print { .dlg { display: none !important; } }

/* 上のバーの「テンプレートから始める」が切れないようにする */
.bar #tpl { max-width: 200px; }

/* ---------- 実操作のレビュー（2026-09-19）を受けた直し ---------- */
/* 小さすぎる字を 12px 以上に */
.tools button { font-size: 12px; }
.ribbon .row .lb, .ribbon .chk, .ribbon .seg button, .ribbon .btn { font-size: 12.5px; }
.ribbon .grp h3 { font-size: 12px; bottom: 3px; }
.num .unit { font-size: 12px; }
.float-bar button { font-size: 12.5px; }
.bar .name small { font-size: 12px; }
.fold-btn { font-size: 12.5px; }
/* 押すと開くわくを、ボタンらしく見せる */
.fold-btn { border-color: var(--line-dark); background: var(--white); box-shadow: 0 1px 0 rgba(0,0,0,.05); }
.fold-btn .caret { font-size: 12px; color: var(--ai); }
/* 配置：左と上を2段にして、せまい画面でも切れないようにする */
.ribbon > .grp:last-child .row { grid-row: span 2; align-items: flex-start; }
.ribbon > .grp:last-child .row .lb { padding-top: 5px; }
.ribbon > .grp:last-child .pair { display: flex; flex-direction: column; gap: 3px; }
/* 選択している文字の色を、傍線（こい色）と見分けやすい、うすい色に */
.selcell { background: rgba(255, 196, 0, .28); }
/* 上のバーのテンプレートのボタン */
.bar .tpl-btn { border-color: var(--ai); color: var(--ai); font-weight: 600; }

/* School Stock へのリンク */
.st-foot { margin: 22px 0 2px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-soft); }
.st-foot a, .help-body a { color: var(--ai); }
.bar .name a { color: inherit; text-decoration: none; }

/* ---------- 「保存」のメニュー ---------- */
.save-menu { position: fixed; z-index: 90; width: 330px; padding: 6px; background: var(--white); border: 1px solid var(--line-dark); border-radius: 7px; box-shadow: 0 10px 32px rgba(0,0,0,.2); }
.save-menu button { display: block; width: 100%; padding: 9px 12px; border: 0; border-radius: 5px; background: transparent; text-align: left; }
.save-menu button:hover, .save-menu button:focus-visible { background: var(--ai-soft); }
.save-menu b { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.save-menu small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.6; color: var(--ink-soft); }
.save-menu hr { margin: 5px 8px; border: 0; border-top: 1px solid var(--line); }

/* 空のテキストボックスの案内の字は、折り返さない（折り返すと、わくの高さが2行ぶんに広がってしまう） */
.tx:empty::before { white-space: nowrap; }

/* スマホで開いた人への案内 */
.pc-body { gap: 12px; font-size: 14px; line-height: 1.8; }
.pc-body p { margin: 0; }
.pc-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.pc-btns .btn { padding: 9px 14px; text-decoration: none; color: inherit; }
.pc-btns .btn.primary { color: #fff; }
.pc-search { padding: 10px 12px; background: var(--ai-soft); }

/* 英語の4線：入れる字のらん */
.ribbon .eisen-text { width: 230px; height: 62px; padding: 4px 6px; border: 1px solid var(--line-dark); border-radius: 4px; font-size: 13px; line-height: 1.5; resize: none; }
.ribbon .grp-body .row:has(.eisen-text) { grid-row: span 3; }

/* 黒板の緑など、ぬった色を印刷でも出す */
.page, .page * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
/* 白い色の見本は、ふちを見せる */
.sw button[title*="白"] { box-shadow: inset 0 0 0 1px var(--line-dark); }

/* ロックした部品：わくを灰色にして、動かす手の形を出さない */
.selbox.locked { border-color: #8a8f96; }
.selbox.locked .grip { background: #6b7280; cursor: default; }
.selbox.locked .edge { cursor: default; }

/* テンプレートの小さい絵を、紙の上へ引きずって落とせないようにする（画像として置かれてしまう） */
.dlg img { -webkit-user-drag: none; user-select: none; }

/* 黒板の上の数式：□は、ぬらずに白い線だけにする */
.sk.on-board .sk-box { background: transparent; }

/* 板書の部品：めあて、まとめの札（棒の上にのる白い札） */
.band-tag { position: absolute; z-index: 2; background: #fff; font: 700 9pt/1.25 var(--ui, sans-serif); padding: .5mm 1.6mm; border-radius: .6mm; white-space: nowrap; pointer-events: none; }
.band-tag.h { left: 0; top: -2.4mm; }
.band-tag.v { left: 100%; top: 0; margin-left: .2mm; writing-mode: vertical-rl; padding: 1.6mm .5mm; }
.parts-menu { width: 250px; max-height: 80vh; overflow: auto; }
#btn-parts { color: #2f5d50; }

/* 板書の型：まだ字を入れていない所に、何を書くかをうすく出す */
.tx[data-hint]:empty::before { content: attr(data-hint); white-space: normal; }
.blk.on-board .tx:empty::before { color: rgba(255,255,255,.38); }
@media print { .tx[data-hint]:empty::before { content: "" !important; } }

/* テンプレートの画面：板書計画の型（入口が2つあるカード） */
.st-sub { margin: -4px 0 10px; font-size: 12.5px; line-height: 1.7; color: var(--ink-soft); }
.st-grid.kata { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.st-card.kata { cursor: default; }
.st-card.kata .st-thumb { aspect-ratio: 297 / 120; }
.st-card.kata .st-thumb img { object-fit: cover; object-position: top; width: 100%; height: 100%; }
.st-tag { align-self: flex-start; margin-top: 4px; padding: 1px 8px; border-radius: 9px; background: #2f5d50; color: #fff; font-size: 11px; }
.st-two { display: flex; gap: 6px; margin-top: 4px; }
.st-two .btn { flex: 1; padding: 6px 4px; font-size: 12.5px; border: 1px solid var(--line-dark); border-radius: 5px; background: #fff; }
.st-two .btn.primary { background: var(--ai); border-color: var(--ai); color: #fff; }

.st-h4 { margin: 18px 0 8px; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.st-toc { position: sticky; top: -1px; z-index: 3; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; padding: 8px 0; background: var(--white, #fff); border-bottom: 1px solid var(--line, #e3e3e0); }
.st-toc button, .st-chips button { padding: 5px 12px; border: 1px solid var(--line-dark, #c9c9c5); border-radius: 14px; background: #fff; font-size: 12.5px; }
.st-toc button:hover, .st-chips button:hover { border-color: var(--ai); }
.st-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.st-chips button.on { background: #2f5d50; border-color: #2f5d50; color: #fff; }

/* 黒板の上の字：語のとちゅうで折れにくくする（文節で折る） */
.blk.text .tx { word-break: auto-phrase; line-break: strict; }

/* 英語の4線：紙の上の段に直接打つ */
.blk.eisen .el { cursor: text; }
.blk.eisen .el:empty::before { content: ""; }
.selbox.editing.eisen { border-style: dashed; }