@import url('./atelier/paper.css');
/* 色は見本1（深い青緑・金・クリーム）。壁と台は本番の絵（assets/art/room.webp）。字は端末の字。 */
:root {
  --wall: #e6d5bc; --wood: #d58344; --wood2: #b8692f;
  --ink: #3b2f2a; --sub: #7a6656; --teal: #2f6f73; --teal2: #24575a;
  --gold: #c9a24a; --gold2: #a8862f; --card: #fffaf2; --line: #d8c7ae;
  --table: 392px;
}
.compact { --table: 223px; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--wall); }
body {
  font-family: "BIZ UDPGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", sans-serif;
  color: var(--ink);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  -webkit-text-size-adjust: 100%;
}
#fit {
  position: fixed; overflow: hidden;
  top: env(safe-area-inset-top); bottom: env(safe-area-inset-bottom);
  left: env(safe-area-inset-left); right: env(safe-area-inset-right);
}
#stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; touch-action: manipulation; }
button { font: inherit; color: inherit; touch-action: manipulation; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: default; }

.screen { position: absolute; inset: 0; }
/* 絵の外（画面の縦横の比が違う時）の続き：部屋の絵の台を横にくり返す */
.table { position: absolute; left: -3000px; right: -3000px; top: var(--table); bottom: -3000px; background: url(../assets/art/room.webp) 3000px -392px / 1180px 820px repeat-x, linear-gradient(var(--wood), var(--wood2) 440px); }
.compact .table { background-position: 3000px -299px, 0 0; background-size: 900px 625.4px, auto; }
/* 部屋：窓の外 → 部屋の絵 の順に重ねる。iPad 横の 1180×820 そのまま。背の低い画面は台の線（--table）が合うよう縮める */
.room { position: absolute; left: 0; top: 0; width: 1180px; height: 820px; transform-origin: 0 0; pointer-events: none; }
.room img { position: absolute; display: block; }
.room .room-img { left: 0; top: 0; }
.compact .room { transform: translate(0, -76px) scale(.7627); }
.title { position: absolute; left: 36px; top: 26px; font-size: 13px; letter-spacing: .24em; color: var(--sub); }
.title b { color: var(--teal2); font-size: 18px; letter-spacing: .16em; margin-right: 12px; }
.compact .atelier .title { display: none; }

/* ---- 左：伝票のボード ---- */

.from { font-size: 14px; color: var(--sub); }
.what { margin-top: 8px; font-size: 26px; font-weight: 700; line-height: 1.45; }
.what b { color: var(--teal); }
.what .formula { font-size: 34px; letter-spacing: 2px; }

.rule { margin: 20px 0 16px; border-top: 2px dashed var(--line); }
.answer { font-size: 18px; color: var(--sub); display: flex; align-items: baseline; gap: 10px; flex-wrap: nowrap; white-space: nowrap; }
.answer .val { display: inline-block; min-width: 64px; text-align: center; font-size: 36px; color: var(--teal); border-bottom: 3px solid var(--teal); line-height: 1.2; height: 46px; }
.by-tray .answer .val { min-width: 48px; }
.keys { margin-top: 18px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.by-tray .keys { display: none; }
.key {
  height: 58px; padding: 0; border-radius: 14px; background: #fff; border: 2px solid var(--line); box-shadow: 0 4px 0 var(--line);
  display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 700; line-height: 1;
}
.key:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--line); }
.key-del { grid-column: 4 / 6; font-size: 20px; color: var(--sub); }
.key:disabled { opacity: .45; }
.hints { position: absolute; left: 24px; right: 24px; bottom: 22px; display: flex; gap: 10px; }
.hint {
  flex: 1; height: 52px; padding: 0 6px; font-size: 16px; line-height: 1; white-space: nowrap;
  border-radius: 12px; border: 2px solid var(--line); color: var(--sub); background: #fff;
  display: flex; align-items: center; justify-content: center;
}
.hint.seen { color: var(--teal); border-color: var(--teal); }
.hint.suggest { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(47,111,115,.18); }
.hint:disabled { opacity: .45; }
.hint.seen:disabled { opacity: .7; }

/* ---- 右：問い・手順・直し方 ---- */
.ask { position: absolute; left: 404px; top: 84px; }
.bubble { background: var(--teal); color: #fff; font-size: 30px; font-weight: 700; line-height: 1.3; padding: 16px 28px; border-radius: 18px; box-shadow: 0 5px 0 var(--teal2); white-space: nowrap; }
.steps { position: absolute; left: 404px; top: 180px; font-size: 15px; color: var(--sub); white-space: nowrap; }
.steps span { display: inline-block; background: rgba(255,255,255,.75); border: 1.5px solid var(--line); border-radius: 8px; padding: 5px 12px; margin-right: 8px; line-height: 1.3; }
.steps span.now { border-color: var(--teal); color: var(--teal); font-weight: 700; background: #fff; }

.note {
  position: absolute; left: 404px; top: 228px; max-width: 740px; display: none; align-items: center; gap: 12px;
  font-size: 19px; line-height: 1.4; color: var(--ink); background: rgba(255,250,242,.94);
  border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 18px; pointer-events: none;
}
.note.show { display: flex; }
.note .tag { font-size: 13px; color: var(--teal); border: 1.5px solid var(--teal); border-radius: 999px; padding: 2px 10px; white-space: nowrap; }

/* ---- 台の上 ---- */
svg.tray { position: absolute; left: 400px; top: 250px; width: 760px; height: 380px; overflow: visible; touch-action: none; }
svg.tray .hit { fill: transparent; cursor: grab; }
svg.tray.locked .hit { cursor: default; }
svg.tray .drop { fill: rgba(47,111,115,.08); stroke: var(--teal); stroke-width: 3; stroke-dasharray: 8 6; }
svg.tray .tray-label { font-size: 23px; font-weight: 700; fill: var(--ink); }
svg.tray .tray-tag { font-size: 20px; font-weight: 700; fill: var(--ink); }
svg.tray .paper { fill: rgba(255,250,242,.88); }
/* マスコット：ふつう・うれしい（少しはねる）・考え中。まちがいでも悲しい顔にはしない */

@keyframes hop { 40% { transform: translateY(-9px); } }

.shiki { position: absolute; left: 404px; top: 660px; padding: 4px 18px; border-radius: 14px; background: rgba(255,250,242,.88); font-size: 36px; font-weight: 700; color: var(--ink); letter-spacing: .06em; white-space: nowrap; }
.shiki:empty { display: none; }
.shiki .dim { opacity: .55; }
.shiki .ans { display: inline-block; min-width: 1.1em; text-align: center; }
.go {
  position: absolute; right: 36px; top: 654px; height: 60px; padding: 0 36px; border: 0;
  background: var(--gold); color: #fff; font-size: 22px; font-weight: 700; line-height: 1;
  border-radius: 16px; box-shadow: 0 5px 0 var(--gold2); display: flex; align-items: center; justify-content: center;
}
.go:disabled { opacity: .55; }

/* ---- はじめの画面 ---- */
.home-art { position: absolute; left: 310px; top: 330px; }
.open {
  position: absolute; left: 50%; top: 590px; transform: translateX(-50%); height: 84px; padding: 0 56px; border: 0;
  background: var(--teal); color: #fff; font-size: 32px; font-weight: 700; line-height: 1; letter-spacing: .08em;
  border-radius: 20px; display: flex; align-items: center; justify-content: center; white-space: nowrap;
}
.admin-door {
  position: absolute; right: 16px; bottom: 12px; height: 44px; padding: 0 14px; border: 0; background: none;
  font-size: 13px; line-height: 1; color: rgba(255,255,255,.7); display: flex; align-items: center; justify-content: center;
}
.admin-door.pressing { color: #fff; }

/* ---- まとめ・管理者設定 ---- */
.card, .admin-card {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 520px; padding: 36px 40px;
  background: var(--card); border: 2px solid var(--line); border-radius: 22px; box-shadow: 0 6px 0 var(--line), 0 16px 30px rgba(80,50,20,.16);
  display: flex; flex-direction: column; align-items: center; gap: 22px;
}
.sum-title { font-size: 28px; font-weight: 700; color: var(--teal2); }
.sum-count { font-size: 22px; color: var(--sub); }
.sum-count b { font-size: 40px; color: var(--teal); margin: 0 4px; }
.mini-boxes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.mini-box { width: 84px; height: 30px; background: url(../assets/art/box_closed.webp) center / 119% auto no-repeat; } /* 絵の箱の写っている所がちょうど入る */
.to-home, .export, .close {
  height: 60px; padding: 0 36px; border: 0; border-radius: 16px; font-size: 22px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center; white-space: nowrap;
}
.to-home, .export { background: var(--teal); color: #fff; box-shadow: 0 5px 0 var(--teal2); }
.close { background: #fff; border: 2px solid var(--line); color: var(--sub); }
.admin { position: absolute; inset: 0; z-index: 50; background: rgba(59,47,42,.35); } /* 作業台の答えの欄（z4）・キー（z8）・つぎへ（z15）より上。下の作業台を押させない */
.admin-title { font-size: 24px; font-weight: 700; }
.dump { width: 100%; height: 180px; font: 13px/1.4 ui-monospace, monospace; -webkit-user-select: text; user-select: text; }

/* ---- 背の低い画面（iPhone 横）：900×470 の台 ---- */

.compact .from { font-size: 12px; }
.compact .what { margin-top: 4px; font-size: 19px; line-height: 1.35; }

.compact .rule { margin: 8px 0 8px; }
.compact .answer { font-size: 15px; gap: 8px; }
.compact .answer .val { font-size: 28px; height: 36px; min-width: 52px; }
.compact .keys { margin-top: 8px; gap: 4px; }
.compact .key { height: 54px; font-size: 24px; }
.compact .key-del { font-size: 17px; }

.compact .hint { height: 54px; }
.compact .ask { left: 340px; top: 10px; }
.compact .bubble { font-size: 22px; padding: 10px 18px; border-radius: 14px; box-shadow: 0 4px 0 var(--teal2); }
.compact .steps { left: 340px; top: 64px; font-size: 14px; }
.compact .steps span { padding: 3px 8px; margin-right: 5px; }

.compact .note { left: 340px; top: 100px; max-width: 548px; font-size: 14px; padding: 6px 12px; }
.compact .note .tag { font-size: 11px; }
.compact svg.tray { left: 336px; top: 120px; width: 552px; height: 276px; }
.compact svg.tray .tray-label { font-size: 26px; }
.compact .shiki { left: 340px; top: 408px; padding: 3px 12px; font-size: 26px; }
.compact .go { right: 12px; top: 404px; height: 56px; padding: 0 28px; font-size: 20px; }
.compact .home .title { left: 24px; top: 16px; }
.compact .home-art { left: 170px; top: 150px; }
.compact .admin-door { height: 56px; }
.compact .open { top: 368px; height: 72px; font-size: 26px; }
.compact .card, .compact .admin-card { padding: 22px 30px; gap: 14px; }
.compact .dump { height: 110px; }

/* ==== 作る依頼6：道具・準備週間・お店の1日 ==== */
/* 注文の主（お客さん）は伝票のボードの右上に小さく。マスコットより大きく見せない */

.fr { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; line-height: 1.05; font-size: .8em; margin: 0 .1em; }
.fr i { font-style: normal; padding: 0 .15em; }
.fr i:first-child { border-bottom: 2px solid currentColor; }

/* 答えの欄（押して選び、数字キーで書く） */
.field {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 60px; padding: 0 12px;
  border: 2px solid transparent; border-radius: 12px; background: none; font-size: 18px; line-height: 1; color: var(--sub); white-space: nowrap;
}
.field.active { border-color: var(--teal); background: #fff; }
.field .val { display: inline-flex; align-items: center; justify-content: center; min-width: 64px; height: 46px; font-size: 36px; color: var(--teal); border-bottom: 3px solid var(--teal); line-height: 1; }
.answer.many { flex-direction: column; align-items: flex-start; gap: 4px; }
.frac-in { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.frac-in .field { height: 54px; }
.frac-in .field .val { height: 40px; font-size: 30px; }
.frac-bar { display: block; width: 80px; border-top: 3px solid var(--ink); }
.frac-in .field .val { border-bottom: 0; }
.answer.frac { align-items: center; }
.hint-line { font-size: 16px; white-space: normal; }

/* 台の上の道具 */
svg.tray.tall { height: 471px; }
svg.tray .tool-btn rect { fill: var(--card); stroke: var(--line); stroke-width: 2.5; }
svg.tray .tool-btn text { font-size: 26px; font-weight: 700; fill: var(--teal2); }
svg.tray .cell { fill: rgba(255,255,255,.6); stroke: var(--line); stroke-width: 2.5; stroke-dasharray: 6 5; }
svg.tray .cell.small { fill: rgba(255,255,255,.35); }
svg.tray .cell.active { stroke: var(--teal); stroke-width: 4; stroke-dasharray: none; fill: #fff; }
.cell-val, .digit { font-weight: 700; fill: var(--ink); }
.cell-val { fill: var(--teal2); }
.digit { font-size: 52px; }
.bar { stroke: var(--ink); stroke-width: 4; fill: none; stroke-linecap: round; }
.slash { stroke: var(--teal2); stroke-width: 4; stroke-linecap: round; }
svg.tray .rule { stroke: var(--ink); stroke-width: 3; }
svg.tray .cut { stroke: var(--ink); stroke-width: 3; stroke-dasharray: 7 5; }
svg.tray .part { font-size: 30px; font-weight: 700; fill: var(--ink); }
svg.tray .lay-guide { fill: none; stroke: var(--line); stroke-width: 3; stroke-dasharray: 10 8; }

/* はじめの画面 */
.home-msg { position: absolute; left: 50%; top: 528px; transform: translateX(-50%); padding: 10px 24px; border-radius: 14px; background: rgba(255,250,242,.92); font-size: 20px; line-height: 1.4; white-space: nowrap; }
.book-door {
  position: absolute; right: 36px; top: 20px; height: 52px; padding: 0 22px; border: 2px solid var(--line); border-radius: 14px;
  background: var(--card); color: var(--teal2); font-size: 18px; font-weight: 700; line-height: 1; display: flex; align-items: center; justify-content: center;
}

/* 開店・閉店の場面（お店の外観） */

.sum-line { font-size: 20px; color: var(--sub); line-height: 1.4; text-align: center; }
.sign { position: absolute; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; letter-spacing: .08em; color: #fff; border-radius: 4px; }

.money { display: flex; justify-content: space-between; align-items: baseline; width: 100%; font-size: 19px; color: var(--sub); border-bottom: 1.5px dashed var(--line); padding: 4px 0; }
.money b { font-size: 26px; color: var(--teal2); }
.card-btns { display: flex; gap: 14px; }
.writing-btn, .sound-btn, .w-ok {
  height: 60px; padding: 0 30px; border: 0; border-radius: 16px; font-size: 22px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center; white-space: nowrap; background: var(--teal); color: #fff; box-shadow: 0 5px 0 var(--teal2);
}
.writing-btn, .sound-btn { background: #fff; color: var(--teal2); border: 2px solid var(--line); box-shadow: 0 4px 0 var(--line); }
.w-ok:disabled { opacity: .45; }

/* 売り上げ帳：台の上に開いて置く。左のページに日ごとの行、右のページに合計 */

.admin-log table { width: 100%; border-collapse: collapse; font-size: 18px; }
.admin-log th, .admin-log td { padding: 6px 10px; border-bottom: 1.5px solid var(--line); text-align: left; }
.admin-log th { font-size: 14px; color: var(--sub); font-weight: 400; }

/* 管理者設定（記録は施主だけが見る） */
.admin-card.wide { width: 760px; gap: 14px; }
.admin-log { width: 100%; max-height: 430px; overflow-y: auto; -webkit-user-select: text; user-select: text; }
.admin-log td { font-size: 15px; }
.admin-log .m-help td:nth-child(2) { color: var(--gold2); font-weight: 700; }
.admin-log .m-unseen td { color: var(--sub); }
.admin-row { font-size: 16px; color: var(--sub); }

/* 筆算の書き方を選ぶ */
.w-card { width: 760px; gap: 16px; }
.w-row { width: 100%; }
.w-q { font-size: 18px; color: var(--sub); margin-bottom: 8px; }
.w-opts { display: flex; gap: 12px; }
.w-opt {
  flex: 1; height: 170px; padding: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: #fff; border: 3px solid var(--line); border-radius: 16px; font-size: 16px; line-height: 1.2;
}
.w-opt.on { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(47,111,115,.2); }
.w-opt .sample { width: 150px; height: 126px; }
.w-unknown { flex: .6; font-size: 18px; }

/* 背の低い画面（iPhone 横）。的は 44px（台の 53px）以上。数字キーは伝票の下にそろえ、ヒントは「消す」の左の段に置く */
.compact .keys { position: absolute; left: 14px; right: 14px; bottom: 14px; margin: 0; }
.compact .hints { left: 14px; right: auto; bottom: 14px; width: calc((100% - 44px) * 3 / 5 + 8px); gap: 4px; }
.compact .hint { font-size: 12px; padding: 0 2px; }

.compact .field { height: 54px; font-size: 15px; padding: 0 8px; }
.compact .field .val { height: 40px; font-size: 28px; min-width: 52px; }
.compact .frac-in .field { height: 54px; }
.compact .frac-in .field .val { height: 40px; font-size: 26px; }
.compact .answer.many { gap: 0; }

.compact svg.tray.tall { height: 342px; }
.compact .home-msg { top: 100px; font-size: 17px; }
.compact .book-door { top: 10px; right: 12px; height: 56px; }

.compact .sum-line { font-size: 16px; }
.compact .money { font-size: 15px; }
.compact .money b { font-size: 20px; }
.compact .writing-btn, .compact .sound-btn, .compact .w-ok, .compact .to-home, .compact .export, .compact .close { height: 54px; font-size: 18px; padding: 0 20px; }

.compact .admin-card.wide, .compact .w-card { width: 860px; padding: 12px 24px; gap: 6px; }
.compact .admin-log { max-height: 250px; }
.compact .w-q { font-size: 15px; margin-bottom: 4px; }
.compact .w-opt { height: 150px; gap: 2px; }
.compact .w-opt .sample { width: 150px; height: 124px; }


/* 単位は本人が選ぶ。数の欄と同じ押しやすさ。 */
.unit-choice { display: flex; gap: 12px; margin-top: 8px; }
.unit-choice button { min-width: 76px; min-height: 48px; border: 2px solid var(--line); border-radius: 10px; background: #fff; color: var(--teal); font-size: 22px; }
.unit-choice button.active { border-color: var(--teal); background: #e4f0eb; }
[data-tool="measure"] .what { font-size: 23px; }
[data-tool="measure"] .answer { flex-wrap: wrap; }
[data-tool="measure"] .steps { font-size: 14px; }
[data-tool="measure"] .note { top: 650px; z-index: 2; }
[data-tool="measure"] .tray { top: 260px; }

[data-tool="measure"] .rule { margin: 12px 0 8px; }
[data-tool="measure"] .keys { margin-top: 12px; gap: 8px; }
[data-tool="measure"] .key { height: 52px; }
[data-tool="measure"] .answer .val { height: 38px; font-size: 30px; }
[data-tool="measure"] .field { min-height: 44px; height: 44px; }

/* build09：試作3の見開き。数の道具は傾けず、紙の台の上に置く。 */
.paper-shop, .atelier { background:radial-gradient(ellipse at 50% 35%,#46524c,#303834 65%,#262c29); }
.shop-ui { position:absolute; inset:0; pointer-events:none; }
.shop-ui button { pointer-events:auto; }
.shop-date { position:absolute; right:22px; top:18px; padding:10px 20px; border-radius:26px; font-size:20px; font-weight:700; }
.shop-bubble { position:absolute; left:470px; top:172px; max-width:530px; padding:18px 26px; border-radius:20px; box-shadow:0 4px #d8c6a4,0 12px 20px #28190a4d; font-size:23px; line-height:1.5; }
.shop-bubble.talk { left:420px; top:190px; }
.day-cards { position:absolute; left:150px; right:150px; bottom:30px; display:flex; justify-content:center; gap:16px; }
.day-card { flex:0 1 208px; height:128px; min-width:110px; padding:10px 8px; border:0; display:flex; flex-direction:column; align-items:center; justify-content:center; touch-action:none; }
.day-card img { width:80px; height:42px; object-fit:contain; pointer-events:none; }
.day-card strong { font-size:16px; line-height:1.4; text-align:center; text-wrap:balance; }.day-card span { font-size:13px; white-space:nowrap; }
.page-turn { position:absolute; right:0; bottom:0; width:150px; height:130px; padding:0; border:0; background:none; z-index:12; filter:drop-shadow(-3px -2px 5px #0003); }
.page-turn svg { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.page-turn span { position:absolute; right:12px; bottom:18px; width:100px; font-size:16px; font-weight:700; color:var(--teal2); }
.close-sign { position:absolute; inset:0; width:128px; height:64px; padding:4px 10px; border:3px solid var(--teal); border-radius:8px; background:#fff8e8; color:var(--teal2); font-weight:700; font-size:17px; white-space:nowrap; }
.resident-hit { position:absolute; border:0; background:transparent; border-radius:45%; }

.reply-options { position:absolute; bottom:30px; left:20px; right:20px; display:flex; justify-content:center; gap:16px; }
.reply-option { min-height:76px; padding:10px 20px; display:flex; align-items:center; gap:10px; border:0; border-radius:36px; font-size:21px; font-weight:700; }
.reply-option .bust { --edge: 2px; } /* P1 は切り抜きの上半身（ui14。丸い枠は使わない） */
.talk-dismiss { position:absolute; inset:0; width:100%; height:100%; border:0; background:transparent; }

.atelier .what { margin-top:10px; line-height:1.5; }

.atelier .rule { margin:12px 0; }
.atelier .answer { font-size:17px; gap:4px; }.atelier .field { padding:0 6px; min-width:44px; min-height:48px; }
.atelier .field .val { min-width:44px; font-size:30px; }
.atelier .keys { margin-top:14px; gap:6px; }.atelier .key { min-width:44px; height:54px; font-size:25px; }
.atelier .key-del { font-size:17px; }.atelier .hints { position:static; margin-top:16px; gap:6px; }
.atelier .hint { height:50px; font-size:14px; }

.atelier .bubble { white-space:normal; }
.atelier .steps { left:270px; top:162px; white-space:normal; }
.atelier .steps span { margin:0 6px 4px 0; }
.atelier .note { max-width:550px; font-size:18px; z-index:4; }

.atelier .shiki { left:390px; top:696px; font-size:24px; max-width:760px; white-space:nowrap; }
.atelier .go { right:26px; top:744px; min-width:200px; height:56px; font-size:22px; z-index:15; }
.atelier:has(.page-turn) .go { right:186px; }

.atelier .unit-choice { gap:8px; }.atelier .unit-choice button { min-width:70px; }
.atelier .formula { font-size:28px; font-weight:700; letter-spacing:3px; }
.copy-lit { color:var(--teal2); background:#f3e1b0; outline:3px solid #87651c; border-radius:4px; }
.copy-ghost { position:absolute; z-index:30; display:flex; align-items:center; justify-content:center; font-size:36px; font-weight:700; color:var(--teal2); background:#fff8e8; border:2px solid var(--gold2); border-radius:8px; pointer-events:none; }
/* goldを22%で白い紙に重ね、さらに濃い境界を付けて色覚に依存しない。 */
svg.tray .guide { fill:var(--gold); opacity:1; fill-opacity:.22; stroke:#87651c; stroke-width:3; stroke-dasharray:8 5; }
.atelier[data-demonstrating="true"] .page-turn { visibility:hidden; }
.atelier[data-tool="measure"] .what { font-size:20px; }.atelier[data-tool="measure"] .answer.many { gap:2px; }
.atelier[data-tool="measure"] .field { height:48px; }.atelier[data-tool="measure"] .keys { gap:6px; }
.atelier[data-tool="measure"] .key { height:54px; }
@media (prefers-reduced-motion: no-preference) { .paper-shop, .atelier { animation:paper-open .35s ease-out; } @keyframes paper-open { from { opacity:.3; transform:perspective(1600px) rotateY(-8deg); } to { opacity:1; transform:none; } } }
/* 背の低い画面の配置。お店は見開きを中央に縮小し、作業台の押す物は44pxを保つ。 */
.compact .paper-shop .paper-scene { width:1180px; height:820px; transform:translate(112px,-30px) scale(.57); transform-origin:0 0; }
.compact .day-cards { left:40px; right:150px; bottom:16px; gap:10px; }.compact .day-card { height:106px; padding-top:16px; padding-bottom:14px; gap:2px; }.compact .day-card img { height:30px; } /* 中身が紙からはみ出さない（final2） */
.compact .shop-bubble { left:300px; top:64px; font-size:18px; max-width:480px; }
.compact .shop-date { font-size:16px; top:8px; right:12px; }
.compact .reply-options { bottom:18px; }
.compact .atelier .paper-scene { transform:translate(-40px,-290px) scale(.9); transform-origin:0 0; width:1180px; height:820px; }

.compact .atelier .keys { position:absolute; left:14px; right:14px; bottom:14px; margin:0; gap:4px; }
.compact .atelier .hints { bottom:14px; left:14px; width:calc((100% - 44px)*3/5 + 8px); right:auto; gap:4px; }
.compact .atelier .hint { height:54px; font-size:12px; }
.compact .atelier .ask { left:16px; top:10px; max-width:540px; }.compact .atelier .bubble { font-size:21px; }
.compact .atelier .steps { left:16px; top:70px; font-size:13px; }
.compact .atelier .note { left:16px; top:118px; max-width:540px; font-size:15px; }
.compact .atelier svg.tray { left:12px; top:170px; width:552px; height:276px; }.compact .atelier svg.tray.tall { top:120px; height:342px; }
.compact .atelier .go { top:400px; right:330px; height:54px; min-width:140px; z-index:16; }
.compact .atelier .shiki { display:none; }

.atelier svg.tray.tall { border:0; box-shadow:none; }
/* 夕方の色は paper.css の .shop-light（ui15） */
@media (prefers-reduced-motion: reduce) { .paper-scene .sign,.paper-scene .wall .door { transition:none; } }

.shop-date { pointer-events:auto; }

/* 本番素材：数の道具の座標を保ち、台紙を天板内に置く。 */
.atelier svg.tray { left:300px; top:380px; width:600px; height:300px; background:#fffaf2; border:0; border-radius:0; box-shadow:none; }
.atelier svg.tray.tall { left:360px; top:410px; width:600px; height:300px; background:none; }
.atelier[data-operation=div] svg.tray.tall { top:380px; }
.compact .atelier[data-operation=div] svg.tray.tall { top:120px; }

.atelier .ask { left:340px; top:290px; width:550px; max-width:550px; border-left:4px solid var(--teal); }
.atelier .bubble { max-width:none; padding:0; border-radius:0; background:none; box-shadow:none; font-size:24px; }
.atelier .steps { position:static; margin-top:8px; width:auto; font-size:14px; line-height:1.6; }
.atelier .steps span { background:none; border:0; padding:0; border-radius:0; }
.season-icon { width:26px; height:26px; vertical-align:middle; margin-right:8px; }
.page-turn > img { position:absolute; inset:0; pointer-events:none; }
.paper-scene .sign .sf { background:transparent; border:0; }

.atelier[data-tool=measure] svg.tray { background:none; }

/* build12：伝票の読みやすさ、人物に結び付いた会話、素材の座面。 */
.atelier .answer { white-space:normal; line-height:1.5; }
.atelier .hint-line { text-wrap:pretty; }
.atelier .what { font-size:20px; text-wrap:pretty; }

.atelier .go:disabled { opacity:1; }
.atelier .note { top:190px; left:340px; }
.atelier svg.tray:not(.tall) { border-radius:8px; }
.atelier[data-tool=measure] svg.tray { border-radius:0; }
.paper-scene .slip-marks { position:absolute; inset:0; }
.shop-bubble.talk { max-width:320px; padding:14px 18px; font-size:20px; line-height:1.45; box-shadow:0 3px #d8c6a4; }
.shop-bubble.talk::after { content:''; position:absolute; left:148px; bottom:-18px; border:10px solid transparent; border-top-color:#fffaf0; border-bottom:0; height:9px; }
.resident-hit span { position:absolute; left:50%; bottom:4px; transform:translateX(-50%); padding:5px 10px; white-space:nowrap; font-size:15px; font-weight:700; color:#24575a; background:#fffaf2; border:2px solid #2f6f73; border-radius:18px; }
.resident-hit:hover, .resident-hit:focus-visible { outline:3px solid #2f6f73; }
.reply-option img { object-fit:cover; object-position:50% 25%; }
@media (max-height:550px) { .compact .atelier .ask { top:10px; left:16px; padding:8px 16px; width:540px; } .compact .atelier .steps { margin-top:5px; } .compact .atelier .hints { position:absolute; margin-top:0; } }

/* build13：縮小した作業台でも帯の内側と筆算の操作域を保つ。 */
.compact .atelier .bubble { padding:0; }
.compact .atelier .steps { width:auto; }
.compact .atelier svg.tray.tall { left:12px; }
.atelier .steps span { margin-bottom:0; }
.shop-bubble { text-align:center; }

.compact .atelier[data-tool=measure] svg.tray { left:4px; top:105px; width:566px; height:360px; }

.atelier .steps:empty { display:none; }
.compact .atelier[data-tool=measure] .field, .compact .atelier .unit-choice button { min-height:54px; height:54px; }

.compact .atelier[data-tool=measure] .answer.many { flex-direction:row; flex-wrap:wrap; align-items:center; }

/* build14：数直線とがい数。iPad横で選ぶ的は実寸45px以上。 */
.atelier[data-tool=numberline] svg.tray { left:285px; top:378px; width:610px; height:336px; }
.atelier[data-tool=numberline] .ask { top:260px; }
.atelier[data-tool=numberline] .note { top:152px; }
.atelier[data-tool=numberline] .answer { flex-wrap:wrap; }
.atelier[data-tool=numberline] .field { min-height:48px; }
.atelier[data-tool=numberline] .what { font-size:19px; }
.atelier[data-tool=numberline] .field .val { min-width:100px; font-size:27px; }
.atelier[data-tool=numberline] .answer.many { gap:5px; }
.atelier[data-tool=numberline] .answer.many .field { width:100%; justify-content:space-between; }
.atelier[data-tool=numberline] .line-choice { cursor:pointer; }
.atelier[data-tool=numberline] .line-choice:focus-visible rect { stroke:#87651c; stroke-width:5; }
.compact .atelier[data-tool=numberline] svg.tray { left:8px; top:120px; width:560px; height:308px; }
.compact .atelier[data-tool=numberline] .ask { left:16px; top:10px; }

.compact .atelier[data-tool=numberline] .field { height:54px; }

.atelier[data-tool=numberline] .line-choice text { pointer-events:none; }

.atelier[data-numbermode=endpoint] .keys { display:none; }
.atelier[data-tool=numberline] .hint { min-height:52px; }

/* ==== ui01：紙の小道具として作り込む（伝票・問いの帯・台紙・ボタンの手ごたえ・文節の改行） ==== */
:root {
  --paper: #fffaf0; --paper2: #f7ecd6; --cast: rgba(70,42,18,.30);
  /* 紙の目：細かいむら（色をうすく混ぜるだけ） */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .32 0 0 0 0 .18 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* 文節で改行（phrase.js が <wbr> を入れる） */
.atelier .what, .atelier .bubble, .atelier .note, .atelier .hint-line, .atelier .steps span,
.shop-bubble, .day-card strong, .reply-option span { word-break: keep-all; overflow-wrap: break-word; line-break: strict; }

/* 押した時の手ごたえ：沈む → はずんで戻る */
.key, .hint, .go, .field, .day-card, .reply-option, .open, .to-home, .book-door, .w-ok, .unit-choice button, .close-sign {
  transition: transform .18s cubic-bezier(.3,1.7,.5,1), box-shadow .18s ease, background-color .15s, filter .15s;
}
.atelier svg .line-choice { transition: transform .18s cubic-bezier(.3,1.7,.5,1); transform-box: fill-box; transform-origin: 50% 50%; }
.atelier svg .line-choice:active { transform: translateY(2px) scale(.98); }

/* ---- 伝票（右）：半券つきの注文の紙。上をテープでとめる ---- */

.atelier .from {
  margin: 0 -14px 12px; padding: 18px 16px 12px; font-size: 14px; font-weight: 700; letter-spacing: .04em; color: #6b5640;
  background: var(--grain), linear-gradient(#f2e6cc, #efe1c3); border-radius: 4px 4px 0 0;
  /* 半券のミシン目 */
  -webkit-mask: radial-gradient(circle 3.2px at 7px 100%, #0000 98%, #000) 0 0 / 14px 100% repeat-x;
          mask: radial-gradient(circle 3.2px at 7px 100%, #0000 98%, #000) 0 0 / 14px 100% repeat-x;
}
.atelier .what { color: #3b2f2a; font-weight: 700; }
.atelier .what b { color: var(--teal2); }

/* 答えの欄：書いている所にカーソル */
.atelier .field { border-radius: 12px; }
.atelier .field.active { background: #fff; border-color: var(--teal); box-shadow: 0 0 0 4px rgba(47,111,115,.14); }
.atelier .field .val { font-variant-numeric: tabular-nums; font-weight: 700; }
.atelier .field.active .val::after { content: ''; display: inline-block; width: 2.5px; height: .8em; margin-left: 2px; background: var(--teal); border-radius: 2px; }
@media (prefers-reduced-motion: no-preference) { .atelier .field.active .val::after { animation: caret 1.05s steps(1) infinite; } }
@keyframes caret { 50% { opacity: 0; } }
/* 数字キー：厚みのある紙のチップ */
.atelier .key {
  background: linear-gradient(#fffefa, #f6ecd9); border: 1.5px solid #d8c4a0; border-radius: 13px; color: #3b2f2a;
  box-shadow: inset 0 1.5px 0 #fff, 0 4px 0 #d3bd95, 0 6px 8px -2px rgba(80,50,20,.22); font-variant-numeric: tabular-nums;
}
.atelier .key:active:not(:disabled) { transform: translateY(3px) scale(.97); box-shadow: inset 0 1px 0 #fff, 0 1px 0 #d3bd95, 0 2px 3px rgba(80,50,20,.18); background: linear-gradient(#f4e9d3, #fbf5ea); }
.atelier .key:disabled { opacity: 1; color: #c3b399; background: #f6efe1; box-shadow: 0 2px 0 #e4d7bd; border-color: #e6d9c0; }
.atelier .key-del { color: #7a6656; }
/* ヒント：伝票の下の小さな札（ふちはステッチ） */
.atelier .hint { background: rgba(255,250,240,.7); border: 1.5px dashed #cdb38a; border-radius: 10px; color: #7a6656; font-weight: 700; }
.atelier .hint:active:not(:disabled) { transform: translateY(2px) scale(.97); }
.atelier .hint.seen { border-style: solid; border-color: var(--teal); color: var(--teal2); background: #eef6f2; }
.atelier .hint:disabled { opacity: 1; color: #c9b9a0; border-color: #e3d6bd; background: none; }
.atelier .hint.seen:disabled { color: var(--teal); opacity: .8; }
@media (prefers-reduced-motion: no-preference) { .atelier .hint.suggest { animation: nudge 1.6s ease-in-out infinite; } }
@keyframes nudge { 0%,100% { box-shadow: 0 0 0 0 rgba(47,111,115,0); } 50% { box-shadow: 0 0 0 5px rgba(47,111,115,.22); } }
/* できあがりの印（やさしく押す） */
.done-stamp { position: absolute; right: 6px; top: 176px; width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  border: 3px solid rgba(176,84,64,.78); box-shadow: inset 0 0 0 3px #fffaf0, inset 0 0 0 4.5px rgba(176,84,64,.6); color: rgba(168,76,58,.9);
  font-size: 14px; font-weight: 800; letter-spacing: .02em; transform: rotate(-14deg); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { .done-stamp { animation: stamp .42s cubic-bezier(.3,1.5,.5,1) both; } }
@keyframes stamp { 0% { opacity: 0; transform: rotate(-14deg) scale(1.7); } 60% { opacity: 1; transform: rotate(-14deg) scale(.94); } 100% { transform: rotate(-14deg) scale(1); } }
.glint { position: absolute; z-index: 40; width: 12px; height: 12px; pointer-events: none; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }

/* ---- 問いの帯：台紙の上に置いた紙のラベル（左にしおりの耳） ---- */
.atelier .ask {
  background: var(--grain), linear-gradient(#fffcf5, #fbf2e0); border: 0; border-radius: 3px 10px 10px 3px; padding: 12px 18px 12px 26px;
  box-shadow: inset 0 0 0 1px rgba(160,120,70,.16), 0 2px 0 #e8d8b8, 0 10px 16px -8px var(--cast);
}
.atelier .ask::before { content: ''; position: absolute; left: -6px; top: -5px; bottom: -5px; width: 16px; border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, #2f6f73, #3d8085); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 92%, 0 100%); }
.atelier .bubble { color: var(--teal2); font-weight: 800; line-height: 1.35; }
.atelier .steps { color: #8b7864; }
.atelier .steps span { white-space: nowrap; }
.atelier .steps span.now { color: var(--teal2); font-weight: 700; background: linear-gradient(transparent 62%, rgba(232,193,105,.45) 62%); }
.atelier .steps span.past { color: #a8987f; }

/* ---- 台紙：天板の上に置いた厚紙。印刷のふちどり ---- */
.atelier:not([data-tool=measure]) svg.tray:not(.tall) {
  background: var(--grain), linear-gradient(170deg, #fffcf4, #fbf3e2); border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(160,120,70,.2), 0 2px 0 #e9dbbd, 0 3.5px 0 rgba(140,100,55,.32), 0 14px 20px -8px var(--cast);
}
/* 印刷のふちどりは、道具が台紙のふちまで描かれない数直線だけ */
.atelier[data-tool=numberline] svg.tray:not(.tall) {
  box-shadow: inset 0 0 0 10px #fffcf4, inset 0 0 0 11.5px #e6d3ae, inset 0 0 0 14px #fffcf4, inset 0 0 0 15px #efe2c8,
    0 2px 0 #e9dbbd, 0 3.5px 0 rgba(140,100,55,.32), 0 14px 20px -8px var(--cast);
}

/* ---- 式の帯：ステッチの紙のタグ ---- */
.atelier .shiki { background: var(--grain), #fffaf0; border-radius: 10px; outline: 1.5px dashed #d6c09a; outline-offset: -6px; padding: 6px 20px;
  box-shadow: 0 2px 0 #e6d5b3, 0 8px 12px -6px var(--cast); color: #3b2f2a; }

/* ---- 届ける：金の札のボタン。押せる時だけそっと光る ---- */
.atelier .go { letter-spacing: .12em; border-radius: 16px;
}
.atelier .go:active:not(:disabled) { transform: translateY(4px); }
.atelier .go.next { background: linear-gradient(#3f8589, #2f6f73 55%, #286165); text-shadow: 0 1px 0 rgba(10,40,40,.5); box-shadow: inset 0 2px 0 rgba(220,250,245,.4), 0 5px 0 #1d4a4c, 0 10px 14px -4px rgba(20,50,50,.35); }
.atelier .go:disabled { color: #8a7a5c; text-shadow: none; background: linear-gradient(#efe4c8, #e6d8b5); box-shadow: inset 0 1px 0 #fff8e6, 0 3px 0 #cdbb92; }
@media (prefers-reduced-motion: no-preference) { .atelier .go:not(:disabled):not(.next) { animation: ready 2.6s ease-in-out infinite; } }
@keyframes ready { 0%,70%,100% { filter: none; } 35% { filter: brightness(1.08) drop-shadow(0 0 8px rgba(240,200,110,.75)); } }

/* ---- P1 の一言（ヒント・直し方・届けた）：P1 の頭の上の吹き出し ---- */
:root:not(.compact) .atelier .note {
  left: 16px; right: auto; top: auto; bottom: 430px; width: fit-content; max-width: 300px; z-index: 6;
  flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 18px 14px; font-size: 18px; line-height: 1.5; color: #3b2f2a;
  background: var(--grain), #fffaf0; border: 0; border-radius: 18px;
  box-shadow: inset 0 0 0 1px rgba(160,120,70,.18), 0 3px 0 #e6d5b3, 0 12px 18px -8px var(--cast);
}
:root:not(.compact) .atelier .note::after { content: ''; position: absolute; left: 150px; bottom: -15px; width: 26px; height: 17px; background: #fffaf0;
  clip-path: polygon(0 0, 100% 0, 38% 100%); }
.atelier .note .tag { background: #eef6f2; font-weight: 700; }
.atelier .note[data-kind=done] { color: var(--teal2); font-weight: 700; }

/* ---- がい数の作業台：問いの帯は窓のわくの下、台紙は天板の中。ゆとりのある縦の大きさ ---- */
:root:not(.compact) .atelier[data-tool=numberline] .ask { top: 286px; left: 326px; width: 556px; padding-top: 10px; padding-bottom: 10px; }
:root:not(.compact) .atelier[data-tool=numberline] .bubble { font-size: 22px; }
:root:not(.compact) .atelier[data-tool=numberline] svg.tray { left: 296px; top: 372px; width: 588px; height: 323.4px; }
:root:not(.compact) .atelier[data-tool=numberline] svg.tray:is([data-mode=round],[data-mode=range]) { height: 330.75px; }
:root:not(.compact) .atelier[data-tool=numberline] svg.tray[data-mode=endpoint] { height: 242.55px; }

/* ---- お店：注文のカードは厚紙のタグ。置き場が決まると印がつく ---- */
.day-card {
  position: relative; padding-top: 18px; padding-bottom: 16px; gap: 4px; /* 上はつるす穴の分。中身は穴の下で上下そろえる */
  background: var(--grain), linear-gradient(#fffcf5, #f8eedb); border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(160,120,70,.18), 0 3px 0 #e2cfab, 0 4px 0 rgba(140,100,55,.3), 0 14px 18px -8px rgba(30,20,10,.45);
}
.day-card:nth-child(odd) { rotate: -1.2deg; } .day-card:nth-child(even) { rotate: 1deg; }
.day-card::before { content: ''; position: absolute; top: 8px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #e7d8ba; box-shadow: inset 0 1px 2px rgba(80,50,20,.35); }
.day-card:active { transform: translateY(3px) scale(.98); }
.day-card span { padding: 3px 12px; border-radius: 999px; color: #7d5f30; background: #f4e3bd; font-weight: 700; }
.day-card.placed span { color: #fff; background: var(--teal); }
.day-card strong { color: #3b2f2a; }
/* 返事のボタン・吹き出し・日付 */
.reply-option { background: var(--grain), linear-gradient(#fffcf5, #f8eedb); box-shadow: inset 0 0 0 1px rgba(160,120,70,.18), 0 4px 0 #dcc59c, 0 12px 16px -8px rgba(30,20,10,.45); color: #3b2f2a; }
.reply-option:active { transform: translateY(3px) scale(.98); box-shadow: inset 0 0 0 1px rgba(160,120,70,.18), 0 1px 0 #dcc59c, 0 4px 6px rgba(30,20,10,.3); }
.shop-bubble { background: var(--grain), #fffaf0; color: #3b2f2a; }
.shop-date { background: var(--grain), #fff8e8; box-shadow: 0 2px 0 #dcc59c, 0 8px 12px -6px rgba(0,0,0,.4); }
.resident-hit span { box-shadow: 0 2px 0 #c9b48f; }
@media (prefers-reduced-motion: no-preference) { .resident-hit:not([hidden]) span { animation: bob 2.2s ease-in-out infinite; } }
@keyframes bob { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -4px); } }

/* ---- 売り上げ帳・まとめ ---- */

.card, .admin-card { background: var(--grain), linear-gradient(#fffcf5, #f8eedb); border: 0; box-shadow: inset 0 0 0 1px rgba(160,120,70,.2), 0 4px 0 #e2cfab, 0 5px 0 rgba(140,100,55,.3), 0 18px 28px -10px var(--cast); }
.to-home, .open, .export { box-shadow: inset 0 2px 0 rgba(220,250,245,.35), 0 5px 0 var(--teal2), 0 10px 14px -4px rgba(20,50,50,.3); }
.to-home:active, .export:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--teal2); }
.open:active { transform: translate(-50%, 4px); box-shadow: 0 1px 0 var(--teal2); }

/* 場面の切りかえ：本のページが開くように（左の綴じ目から） */
@media (prefers-reduced-motion: no-preference) {
  .paper-shop, .atelier { animation: page-open .42s cubic-bezier(.25,.8,.3,1); transform-origin: 0 50%; }
  @keyframes page-open { from { opacity: .35; transform: perspective(1800px) rotateY(-12deg); } to { opacity: 1; transform: none; } }
}
/* 背の低い画面でも数直線の縮みを前と同じ（幅560 → 0.7倍）に保つ */
.compact .atelier[data-tool=numberline] svg.tray:is([data-mode=round],[data-mode=range]) { top: 100px; height: 315px; }
.compact .atelier[data-tool=numberline] svg.tray[data-mode=endpoint] { height: 231px; }
.compact .atelier[data-tool=numberline] .note { top: 86px; }

/* ==== ui02 ==== */
/* 箱・袋・皿：台紙は中身に合わせた横長（viewBox 800×300）。式の帯はすぐ下 */
:root:not(.compact) .atelier:is([data-tool=tray],[data-tool=bags],[data-tool=plates]) svg.tray { top: 392px; height: 225px; }
:root:not(.compact) .atelier:is([data-tool=tray],[data-tool=bags],[data-tool=plates]) .shiki { top: 634px; }
.compact .atelier:is([data-tool=tray],[data-tool=bags],[data-tool=plates]) svg.tray { height: 207px; }
/* L02：金の地に濃い字（白い字は金の上で薄い） */
.atelier .go { color: #3a2608; text-shadow: 0 1px 0 rgba(255,236,190,.6); background: linear-gradient(#f3d27e, #e4b553 55%, #d9a443); box-shadow: inset 0 2px 0 rgba(255,248,225,.7), inset 0 -2px 0 rgba(150,100,30,.25), 0 5px 0 #a87a2a, 0 10px 14px -4px rgba(80,50,20,.35); }
.atelier .go:active:not(:disabled) { box-shadow: inset 0 2px 0 rgba(255,248,225,.6), 0 1px 0 #a87a2a, 0 3px 5px rgba(80,50,20,.3); }
.atelier .go.next { color: #fff; }
/* 保存できない時の知らせ（入力は残したまま） */
.save-note { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 14px; max-width: 760px;
  padding: 10px 12px 10px 20px; border-radius: 16px; background: var(--grain), #fff6df; color: #4a3a2a; font-size: 18px; line-height: 1.45;
  box-shadow: inset 0 0 0 2px #e2c27d, 0 3px 0 #d9bb7a, 0 12px 18px -8px rgba(60,35,15,.4); word-break: keep-all; overflow-wrap: break-word; }
.save-note button { flex: none; min-width: 44px; min-height: 48px; padding: 0 18px; border: 0; border-radius: 12px; background: var(--teal); color: #fff; font-size: 17px; font-weight: 700; box-shadow: 0 3px 0 var(--teal2); }
.save-note button.quiet { background: #fff; color: var(--teal2); box-shadow: inset 0 0 0 2px var(--line), 0 3px 0 var(--line); }
/* 会話：何も選ばずに閉じる */
.talk-close { position: absolute; right: 22px; bottom: 120px; min-width: 120px; min-height: 52px; padding: 0 20px; border: 0; border-radius: 26px; background: var(--grain), #fffaf0; color: #6b5640; font-size: 18px; font-weight: 700; box-shadow: 0 3px 0 #dcc59c, 0 10px 14px -8px rgba(30,20,10,.45); }
/* 入退店を早める（押すと着く） */
.walk-skip { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; z-index: 5; }
/* 売り上げ帳：日を送る */

.money .jar { display: inline-flex; align-items: center; gap: 6px; color: var(--teal2); font-size: 16px; }
.money .jar svg { width: 34px; height: 40px; }
/* M05：幅の小さい iPad。伝票を広げ、キー・ヒント・欄・ボタンを 46px×縮みの逆数に（実寸44px以上） */
.narrow { --bw: calc(52px + 5 * 46px * var(--inv) + 24px); }

.narrow .atelier .key { height: max(54px, calc(46px * var(--inv))); }
.narrow .atelier .hint, .narrow .atelier .field, .narrow .atelier .unit-choice button { min-height: max(50px, calc(46px * var(--inv))); }
.narrow .atelier .go { height: max(56px, calc(48px * var(--inv))); }
.narrow .atelier svg.tray, .narrow .atelier[data-tool=numberline] svg.tray { width: calc(1172px - var(--bw) - 304px); left: 296px; }
.narrow .atelier .ask, .narrow .atelier[data-tool=numberline] .ask { width: calc(1172px - var(--bw) - 340px); }
.narrow .talk-close { min-height: max(48px, calc(46px * var(--inv))); min-width: max(52px, calc(46px * var(--inv))); }
/* 縦の画面：このゲームは横向きで作っている。縦の時は横にする案内だけを出す */
.rotate-note { display: none; }
@media (orientation: portrait) and (min-width: 600px) {
  .rotate-note { display: flex; position: fixed; inset: 0; z-index: 100; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 40%, #46524c, #262c29); }
  .rotate-note span { padding: 22px 34px; border-radius: 20px; background: #fffaf0; color: #24575a; font-size: 26px; font-weight: 800; box-shadow: 0 4px 0 #d8c6a4; }
}
/* M04：iPhone 横でも途中でお店へ戻れる。左下の小さなめくり */
.compact .atelier .page-turn { display: block; left: 0; right: auto; bottom: 0; width: 104px; height: 60px; filter: none; z-index: 16; }
.compact .atelier .page-turn svg, .compact .atelier .page-turn > img { display: none; }
.compact .atelier .page-turn span { position: static; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 0 16px 0 0; background: var(--grain), #fffaf0; box-shadow: 0 -2px 0 #e2cfab inset, 2px -2px 8px rgba(0,0,0,.25); font-size: 17px; }
/* M12：帳は3日ずつ。行は品をつないで短く */

.compact .talk-close{ min-height: 56px; min-width: 60px; }
/* ui07 吹き出し・見つけた紙の文：行の長さをそろえ、最後の行に1文節だけ残さない（文節の切れ目は phrase.js の <wbr>） */
.shop-bubble, .tw-find p { text-wrap: balance; }
/* ui07 扉の札の字：札の絵（shop_sign_front・back）の板は下のほう（上はつり金具）。板のまん中（絵の高さの 0.65）に字を置く */
.paper-scene .sign .sf { padding-top: 18px; }
/* ui07 iPhone 横：返事の札を本（お店の床の紙・町の見開き）の幅の中に。長い返事は文節で2行にする */
.compact .reply-options { left: 104px; right: 104px; gap: 8px; }
.compact .reply-option { flex: 0 1 auto; min-height: 64px; font-size: 16px; padding: 6px 12px; gap: 8px; }
.compact .reply-option img { width: 40px; height: 40px; flex: none; }
.compact .reply-option span { text-wrap: balance; }
.compact .talk-close { right: 116px; } /* iPhone 横：「とじる」も本の中（表紙の上に出さない） */

/* ---- 管理者設定：記録を読みこむ（fix01u）。ボタンがふえたので折り返す ---- */
.admin-card .card-btns { flex-wrap: wrap; justify-content: center; }
.import, .ask-export, .ask-load, .ask-cancel {
  height: 60px; padding: 0 30px; border-radius: 16px; font-size: 22px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center; white-space: nowrap; background: #fff; color: var(--teal2); border: 2px solid var(--line); box-shadow: 0 4px 0 var(--line);
}
.ask-load { background: var(--teal); color: #fff; border: 0; box-shadow: 0 5px 0 var(--teal2); }
.ask-cancel { box-shadow: none; color: var(--sub); }
.admin-ask { position: absolute; inset: 0; z-index: 2; border-radius: 20px; background: var(--card); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; padding: 40px 64px; }
.admin-ask[hidden], .admin-ask [hidden] { display: none; }
.ask-text { margin: 0; max-width: 600px; font-size: 22px; line-height: 1.7; text-align: center; word-break: keep-all; line-break: strict; }
.compact .import, .compact .ask-export, .compact .ask-load, .compact .ask-cancel { height: 54px; font-size: 18px; padding: 0 20px; }
.compact .ask-text { font-size: 18px; }
.compact .admin-ask { gap: 18px; padding: 20px 40px; }
.compact .admin-card .card-btns { flex-wrap: nowrap; gap: 10px; } /* 背の低い画面は1列（縦に入りきらない） */