/* ui16：お店の品（市場・レシピ・置き場）。売り上げ帳と同じ布張りの本、模様がえと同じ帳の紙とボタン。押す物は 54px（iPhone 横で実寸44pt以上） */
.trade-mode .shop-ui > * { pointer-events:auto; }
.trade-mode .trade-top { position:absolute; left:22px; top:16px; height:56px; display:flex; align-items:center; gap:14px; padding:0 22px; border-radius:28px; background:var(--grain), #fff8e8; box-shadow:0 3px #e2cfab; font-size:18px; color:#3b2f2a; z-index:15; }
.trade-mode .trade-top > b { color:var(--teal2); font-size:21px; }
.trade-mode .trade-wallet { display:flex; align-items:center; gap:6px; white-space:nowrap; }
.trade-mode .trade-wallet b { font-size:20px; color:var(--teal2); }
.trade-mode .trade-done { position:absolute; right:22px; top:16px; min-width:120px; height:56px; padding:0 24px; border:0; border-radius:28px; background:var(--teal); color:#fff; font-size:20px; font-weight:800; box-shadow:0 4px #1d4a4c; z-index:15; }
/* 見出しの紙のつまみ（本の上のふち）。いつも同じ所 */
.trade-mode .trade-tabs { position:absolute; left:50%; top:16px; transform:translateX(-50%); display:flex; gap:8px; z-index:15; }
.trade-mode .trade-tab { width:132px; height:56px; border:0; border-radius:16px 16px 8px 8px; background:#efe3c9; color:#6b543c; font-size:20px; font-weight:800; box-shadow:inset 0 -4px #dccaa6, 0 3px 6px rgba(40,25,10,.18); }
.trade-mode .trade-tab.on { background:var(--grain), #fffaf0; color:var(--teal2); box-shadow:inset 0 0 0 2px #b9d6cc, 0 4px #9cc3b6; }
.trade-mode .trade-veil { position:absolute; inset:0; background:rgba(40,30,20,.34); pointer-events:none !important; }
.trade-mode [hidden] { display:none !important; }

/* 本：左のページ＝一覧、右のページ＝えらんだ物 */
.trade-mode .trade-book { position:absolute; left:44px; right:44px; top:96px; bottom:22px; display:grid; grid-template-columns:1fr 1fr; column-gap:44px; padding:22px 26px 20px; border-radius:18px; z-index:12;
  background:linear-gradient(90deg, transparent calc(50% - 3px), rgba(90,60,30,.25) 50%, transparent calc(50% + 3px)), var(--grain), linear-gradient(#fffcf4, #f6ebd3);
  box-shadow:0 0 0 10px #4f7b6e, 0 0 0 12px #3e665a, 0 22px 34px -8px rgba(30,20,10,.55); }
.trade-mode .tb-page { position:relative; min-width:0; min-height:0; overflow-y:auto; overflow-x:hidden; scrollbar-width:none; }
.trade-mode .tb-page::-webkit-scrollbar { display:none; }
.trade-mode .tb-detail { padding-bottom:96px; } /* 下に P1 のひとこと */
.trade-mode .tb-head { margin:10px 2px 8px; font-size:17px; font-weight:700; color:var(--sub); letter-spacing:.06em; }
.trade-mode .tb-head:first-child { margin-top:0; }
.trade-mode .tb-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; padding:2px 2px 8px; }
.trade-mode .tb-card { position:relative; height:132px; padding:6px 4px; border:0; border-radius:14px; background:#f6efdf; box-shadow:inset 0 0 0 2px #e4d4b2, 0 3px #e2cfab; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:3px; color:#3b2f2a; }
.trade-mode .tb-card.on { background:#eef6f2; box-shadow:inset 0 0 0 3px var(--teal), 0 3px #9cc3b6; }
.trade-mode .tb-card.away { opacity:.6; }
.trade-mode .tb-card:active, .trade-mode .ts-card:active { translate:0 2px; }
.trade-mode .tb-pic { flex:1; min-height:0; width:100%; display:flex; align-items:flex-end; justify-content:center; }
.trade-mode .tb-pic img, .trade-mode .tb-pic svg { max-width:92%; max-height:66px; object-fit:contain; display:block; filter:drop-shadow(0 3px 2px rgba(70,42,18,.25)); }
.trade-mode .tb-pic svg.mat-bag { width:84px; height:63px; filter:none; }
.trade-mode .tb-name { font-size:14px; font-weight:700; line-height:1.2; text-align:center; max-width:100%; word-break:keep-all; overflow-wrap:break-word; }
.trade-mode .tq { font-size:16px; color:var(--teal2); font-variant-numeric:tabular-nums; line-height:1.1; white-space:nowrap; }
.trade-mode .tq small { font-size:12px; margin-left:1px; }
.trade-mode .tq.many { font-size:13px; color:#9a6f48; }
.trade-mode .ty { color:var(--teal2); font-size:20px; display:inline-flex; align-items:center; gap:2px; white-space:nowrap; }
.trade-mode .ty small { font-size:14px; }
.trade-mode .ty.jar .jar-mini { width:20px; height:24px; }
/* まだのレシピ：封をしたカード（丸の枠に入れない。紙の封筒に封の印） */
.trade-mode .tb-card.sealed { background:#efe6d3; }
.trade-mode .tb-card.sealed .tb-name { color:#9a8570; font-weight:400; }
.trade-mode .tb-seal { width:62px; height:46px; display:block; margin:auto auto 4px; border-radius:6px; background:linear-gradient(160deg,#e9dcc0,#dccba8); box-shadow:inset 0 0 0 2px #cdb995, 0 2px 0 #c4ae86; position:relative; rotate:-4deg; }
.trade-mode .tb-seal::before { content:""; position:absolute; left:0; right:0; top:0; height:24px; background:linear-gradient(to bottom right, transparent 49%, #cdb995 50%, transparent 53%), linear-gradient(to bottom left, transparent 49%, #cdb995 50%, transparent 53%); }
.trade-mode .tb-seal::after { content:""; position:absolute; left:50%; top:18px; width:16px; height:16px; margin-left:-8px; background:#b9574a; clip-path:polygon(50% 0,63% 30%,97% 35%,72% 57%,79% 91%,50% 74%,21% 91%,28% 57%,3% 35%,37% 30%); }
.trade-mode .tb-seal.big { width:150px; height:110px; }
.trade-mode .tb-seal.big::before { height:56px; }
.trade-mode .tb-seal.big::after { top:42px; width:34px; height:34px; margin-left:-17px; }
.trade-mode .tb-chips { display:flex; gap:8px; margin:0 2px 10px; position:sticky; top:0; z-index:2; padding-bottom:6px; background:linear-gradient(#fffbf2 80%, transparent); }
.trade-mode .tb-chip { flex:1; height:50px; border:0; border-radius:25px; background:#efe3c9; color:#6b543c; font-size:17px; font-weight:800; box-shadow:inset 0 -3px #dccaa6; }
.trade-mode .tb-chip.on { background:var(--teal); color:#fff; box-shadow:0 3px #1d4a4c; }

/* 右のページ */
.trade-mode .tb-empty { height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; color:var(--sub); font-size:19px; text-align:center; }
.trade-mode .tb-empty p { margin:0; max-width:380px; line-height:1.6; word-break:keep-all; overflow-wrap:break-word; }
.trade-mode .tb-hero { display:flex; align-items:center; gap:18px; padding:0 4px 12px; border-bottom:1.5px dashed var(--line); }
.trade-mode .tb-big { flex:none; width:216px; height:162px; display:flex; align-items:flex-end; justify-content:center; background:radial-gradient(ellipse 60% 12% at 50% 92%, rgba(70,42,18,.2), transparent 70%); }
.trade-mode .tb-big img { max-width:100%; max-height:100%; object-fit:contain; display:block; filter:drop-shadow(0 6px 4px rgba(70,42,18,.25)); }
.trade-mode .tb-big svg.mat-bag { width:190px; height:142px; }
.trade-mode .tb-hero h2 { margin:0 0 8px; font-size:28px; color:#3b2f2a; line-height:1.25; word-break:keep-all; }
.trade-mode .tb-have { margin:4px 0 0; font-size:17px; color:var(--sub); display:flex; align-items:center; gap:8px; }
.trade-mode .tb-have .tq { font-size:22px; }
.trade-mode .tb-src { margin-top:12px; padding:12px 16px; border-radius:14px; background:#fff8e8; box-shadow:inset 0 0 0 1.5px #e7d6b5; display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.trade-mode .tb-src p { margin:0; font-size:18px; line-height:1.5; color:#3b2f2a; word-break:keep-all; overflow-wrap:break-word; }
.trade-mode .tb-src p.tb-why, .trade-mode p.tb-why { color:#9a6f48; }
.trade-mode .tb-src p.tb-why { margin:0; }
.trade-mode p.tb-why { margin:14px 4px 0; font-size:18px; line-height:1.5; }
.trade-mode .tb-done { color:var(--teal2) !important; font-weight:700; }
.trade-mode .tb-done::before { content:"✓ "; }
.trade-mode .tb-buy { flex-direction:row; flex-wrap:wrap; align-items:center; gap:12px 18px; }
.trade-mode .tb-line { display:flex; align-items:center; gap:8px; font-size:17px; color:var(--sub); }
.trade-mode .tb-step { display:flex; align-items:center; gap:8px; }
.trade-mode .tb-pm { width:56px; height:56px; border:0; border-radius:16px; background:#eef6f2; color:var(--teal2); font-size:28px; font-weight:800; box-shadow:inset 0 0 0 2px #b9d6cc; display:flex; align-items:center; justify-content:center; }
.trade-mode .tb-pm[hidden] { display:flex !important; visibility:hidden; } /* 端の数では押す物を出さないが、数の位置は動かさない */
.trade-mode .tb-n { min-width:76px; text-align:center; font-size:28px; color:#3b2f2a; font-variant-numeric:tabular-nums; }
.trade-mode .tb-n small { font-size:16px; margin-left:2px; }
.trade-mode .tb-go { height:56px; padding:0 30px; border:0; border-radius:16px; background:var(--teal); color:#fff; font-size:20px; font-weight:800; box-shadow:0 4px #1d4a4c; display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; }
.trade-mode .tb-buy .tb-go { margin-left:auto; }
.trade-mode .tb-go.soft { background:#eef6f2; color:var(--teal2); box-shadow:inset 0 0 0 2px #b9d6cc, 0 3px #9cc3b6; }
.trade-mode .tb-go.small { height:48px; padding:0 16px; font-size:16px; }
.trade-mode .tb-go:active, .trade-mode .tb-pm:active { translate:0 3px; box-shadow:none; }
.trade-mode .tb-sub { margin:12px 4px 4px; font-size:16px; color:var(--sub); }
.trade-mode .tb-need { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.trade-mode .tb-need li { display:grid; grid-template-columns:52px 1fr auto auto; align-items:center; gap:10px; min-height:58px; padding:4px 10px; border-radius:12px; background:#fff8e8; box-shadow:inset 0 0 0 1.5px #e7d6b5; font-size:17px; }
.trade-mode .tb-need li.short { grid-template-columns:52px 1fr auto auto auto; background:#fbf0e3; box-shadow:inset 0 0 0 1.5px #e5c9a8; }
.trade-mode .tb-mini { width:52px; height:40px; display:flex; align-items:flex-end; justify-content:center; }
.trade-mode .tb-mini img, .trade-mode .tb-mini svg { max-width:100%; max-height:100%; object-fit:contain; display:block; }
.trade-mode .tb-mname { font-weight:700; }
.trade-mode .tb-x { font-size:18px; font-weight:800; color:#3b2f2a; white-space:nowrap; }
.trade-mode .tb-mhave { font-size:14px; color:var(--sub); display:flex; align-items:center; gap:4px; white-space:nowrap; }
.trade-mode .tb-need li.short .tb-mhave .tq { color:#b0603f; }
.trade-mode .tb-detail > .tb-buy { margin-top:14px; }

/* P1 のひとこと（本の時は右のページの下、置き場の時は上） */
.trade-mode .trade-say { position:absolute; right:84px; bottom:44px; width:470px; display:flex; align-items:center; gap:10px; padding:10px 18px 10px 10px; border-radius:18px; background:#fffaf0; box-shadow:0 3px #d8c6a4, 0 10px 18px #28190a33; font-size:18px; line-height:1.45; color:#3b2f2a; z-index:14; pointer-events:none !important; }
.trade-mode .trade-say span { word-break:keep-all; overflow-wrap:break-word; line-break:strict; }
.trade-mode .trade-say .bust { --edge:2px; flex:none; }
.trade-mode[data-tab="place"] .trade-say { right:auto; left:50%; transform:translateX(-50%); top:86px; bottom:auto; width:auto; max-width:660px; }

/* 置き場：お店の絵の上に光る台、下の帳に作った品 */
.trade-mode .trade-strip { position:absolute; left:16px; right:16px; bottom:8px; height:214px; padding:8px 12px 10px; border-radius:16px; background:var(--grain), #fffaf0; box-shadow:inset 0 0 0 1px rgba(160,120,70,.18), 0 3px #e2cfab, 0 -10px 24px rgba(40,25,10,.18); display:flex; flex-direction:column; gap:6px; z-index:13; }
.trade-mode .ts-hint { margin:0; font-size:17px; color:var(--sub); line-height:1.3; }
.trade-mode .ts-row { flex:1; min-height:0; display:flex; gap:10px; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; padding:2px 2px 4px; }
.trade-mode .ts-row::-webkit-scrollbar { display:none; }
.trade-mode .ts-card { flex:none; width:156px; padding:6px; border:0; border-radius:14px; background:#f6efdf; box-shadow:inset 0 0 0 2px #e4d4b2, 0 3px #e2cfab; display:flex; flex-direction:column; align-items:center; gap:2px; color:#3b2f2a; }
.trade-mode .ts-card .tb-pic img { max-height:56px; }
.trade-mode .ts-card.on { background:#eef6f2; box-shadow:inset 0 0 0 3px var(--teal), 0 0 0 4px rgba(255,236,160,.6); translate:0 -6px; }
.trade-mode .ts-at { font-size:12px; padding:1px 8px; border-radius:9px; background:#efe3c9; color:#6b543c; white-space:nowrap; }
.trade-mode .ts-meta { font-size:13px; color:var(--sub); display:flex; align-items:center; gap:4px; white-space:nowrap; }
.trade-mode .ts-meta .tq { font-size:15px; }
.trade-mode .ts-meta.sell { color:#9a6f48; }
.trade-mode .ts-empty { flex:1; display:flex; align-items:center; justify-content:center; gap:20px; font-size:19px; color:var(--sub); }
.trade-mode .ts-empty p { margin:0; }
.trade-mode .trade-spot { position:absolute; height:54px; padding:0 20px; border:0; border-radius:27px; background:rgba(255,250,235,.95); color:var(--teal2); font-size:18px; font-weight:800; white-space:nowrap; box-shadow:0 0 0 4px rgba(255,236,160,.7), 0 0 18px #fff3b0, 0 4px 10px #0003; z-index:11; }
.trade-mode .trade-spot.here { background:#eef6f2; box-shadow:0 0 0 3px var(--teal), 0 4px 10px #0003; }
@media (prefers-reduced-motion: no-preference) { .trade-mode .trade-spot:not(.here) { animation:trade-glow 1.6s ease-in-out infinite; } }
@keyframes trade-glow { 50% { box-shadow:0 0 0 7px rgba(255,236,160,.45), 0 0 26px #fff3b0, 0 4px 10px #0003; } }
/* 台にのせた品：絵の縦横はそのまま、下のふちを台の面にそろえる */
.paper-scene .slotItem.goods > img { position:absolute; left:0; bottom:0; height:auto; }

/* お店の画面の入口（模様がえの横に並べる） */
.paper-shop .shop-doors { position:absolute; left:22px; top:16px; display:flex; gap:10px; z-index:12; pointer-events:auto; }
.paper-shop .shop-doors .decor-door { position:static; }
.paper-shop .trade-door { height:56px; display:inline-flex; align-items:center; gap:8px; padding:0 20px; border:0; border-radius:28px; background:#fff8e8; color:var(--teal2); font-size:19px; font-weight:800; box-shadow:0 3px #e2cfab; }
.paper-shop .trade-door img { width:40px; height:auto; display:block; }

/* 背の低い画面（iPhone 横 900×470） */
.compact .paper-shop .shop-doors { left:10px; top:6px; gap:8px; }
.compact .paper-shop .trade-door { height:54px; padding:0 16px; font-size:16px; }
.compact .paper-shop .trade-door img { width:34px; }
.compact .trade-mode .trade-top { left:10px; top:6px; height:54px; padding:0 14px; gap:10px; font-size:15px; }
.compact .trade-mode .trade-top > b { font-size:17px; }
.compact .trade-mode .trade-wallet b { font-size:17px; }
.compact .trade-mode .trade-done { right:10px; top:6px; height:54px; min-width:96px; padding:0 18px; font-size:18px; }
.compact .trade-mode .trade-tabs { top:6px; left:auto; right:120px; transform:none; gap:6px; }
.compact .trade-mode .trade-tab { width:100px; height:54px; font-size:17px; }
.compact .trade-mode .trade-book { left:12px; right:12px; top:72px; bottom:8px; column-gap:26px; padding:12px 14px 10px; box-shadow:0 0 0 6px #4f7b6e, 0 0 0 7px #3e665a, 0 12px 20px -8px rgba(30,20,10,.55); }
.compact .trade-mode .tb-head { margin:6px 2px 4px; font-size:14px; }
.compact .trade-mode .tb-grid { gap:6px; }
.compact .trade-mode .tb-card { height:104px; padding:5px 2px; }
.compact .trade-mode .tb-pic img, .compact .trade-mode .tb-pic svg { max-height:46px; }
.compact .trade-mode .tb-pic svg.mat-bag { width:60px; height:45px; }
.compact .trade-mode .tb-name { font-size:12px; }
.compact .trade-mode .tq { font-size:14px; }
.compact .trade-mode .tb-chip { height:54px; font-size:15px; }
.compact .trade-mode .tb-chips { margin-bottom:6px; }
.compact .trade-mode .tb-detail { padding-bottom:78px; }
.compact .trade-mode .tb-hero { gap:12px; padding-bottom:8px; }
.compact .trade-mode .tb-big { width:132px; height:99px; }
.compact .trade-mode .tb-big svg.mat-bag { width:120px; height:90px; }
.compact .trade-mode .tb-seal.big { width:110px; height:80px; }
.compact .trade-mode .tb-hero h2 { font-size:21px; margin-bottom:4px; }
.compact .trade-mode .tb-have { font-size:14px; margin-top:2px; }
.compact .trade-mode .tb-have .tq { font-size:18px; }
.compact .trade-mode .tb-src { margin-top:8px; padding:8px 12px; gap:8px; }
.compact .trade-mode .tb-src p, .compact .trade-mode p.tb-why { font-size:15px; }
.compact .trade-mode .tb-pm { width:54px; height:54px; }
.compact .trade-mode .tb-n { min-width:58px; font-size:22px; }
.compact .trade-mode .tb-go { height:54px; padding:0 22px; font-size:17px; }
.compact .trade-mode .tb-go.small { height:54px; padding:0 12px; font-size:14px; }
.compact .trade-mode .tb-sub { margin:6px 2px 2px; font-size:13px; }
.compact .trade-mode .tb-need li { grid-template-columns:40px 1fr auto auto; min-height:56px; gap:6px; padding:0 8px; font-size:14px; }
.compact .trade-mode .tb-need li.short { grid-template-columns:40px 1fr auto auto auto; }
.compact .trade-mode .tb-mini { width:40px; height:32px; }
.compact .trade-mode .tb-x { font-size:15px; }
.compact .trade-mode .tb-mhave { font-size:12px; }
.compact .trade-mode .trade-say { right:30px; bottom:16px; width:380px; font-size:15px; padding:6px 14px 6px 6px; }
.compact .trade-mode[data-tab="place"] .trade-say { top:66px; max-width:560px; }
.compact .trade-mode .tb-empty { font-size:16px; gap:8px; }
.compact .trade-mode[data-tab="place"] .paper-scene, .compact .trade-mode[data-tab="place"] > .shop-light { transform:translate(84px,-62px) scale(.6); }
.compact .trade-mode .trade-strip { left:8px; right:8px; bottom:4px; height:176px; padding:4px 8px 6px; gap:2px; }
.compact .trade-mode .ts-hint { font-size:14px; }
.compact .trade-mode .ts-card { width:124px; padding:4px; }
.compact .trade-mode .ts-card .tb-pic img { max-height:40px; }
.compact .trade-mode .ts-meta { font-size:11px; }
.compact .trade-mode .ts-meta .tq { font-size:13px; }
.compact .trade-mode .trade-spot { height:54px; font-size:16px; padding:0 14px; }

/* ---- ui16：売り上げ帳の表・棒グラフ・折れ線（day.css の .ledger2 に足す） ---- */
.ledger2.with-views .lpage.left { gap:10px; }
.ledger2 .lviews { display:flex; gap:6px; }
.ledger2 .lview { flex:1; height:48px; border:0; border-radius:24px; background:#efe3c9; color:#6b543c; font-size:17px; font-weight:800; box-shadow:inset 0 -3px #dccaa6; }
.ledger2 .lview.on { background:var(--teal); color:#fff; box-shadow:0 3px #1d4a4c; }
.ledger2 .lbody { flex:1; min-height:0; display:flex; flex-direction:column; gap:8px; }
.ledger2 .lbody .page-nav { margin-top:auto; }
.ledger2 .used { display:block; margin-top:2px; font-size:13px; color:var(--sub); line-height:1.3; word-break:keep-all; overflow-wrap:break-word; }
.ledger2 td.n { font-variant-numeric:tabular-nums; color:#3b2f2a; }
.ledger2 .lchart-cap { margin:0; font-size:16px; color:var(--sub); text-align:center; }
.ledger2 .lchart-empty { margin:auto 0; font-size:18px; color:var(--sub); text-align:center; }
.ledger2 .lchart-empty.small { margin:0; font-size:15px; }
.ledger2 .ch { width:100%; height:auto; display:block; }
.ledger2 .to-practice { align-self:center; height:54px; padding:0 26px; border:0; border-radius:16px; background:#eef6f2; color:var(--teal2); font-size:18px; font-weight:800; box-shadow:inset 0 0 0 2px #b9d6cc, 0 3px #9cc3b6; }
.compact .ledger2 .lview { height:54px; font-size:15px; }
.compact .ledger2 .ltitle { font-size:22px; }
.compact .ledger2 .used { font-size:11px; }
.compact .ledger2 .ch { max-height:270px; }
.compact .ledger2 .to-practice { height:54px; font-size:15px; padding:0 16px; }
/* グラフの線と棒（帳と遊びの算数で同じ） */
.ch .ch-grid { stroke:#d9c7a8; stroke-width:1; }
.ch .ch-grid.major { stroke:#bfa47c; stroke-width:1.4; }
.ch .ch-grid.base, .ch .ch-axis { stroke:#7a6656; stroke-width:2; fill:none; }
.ch text { font-family:inherit; fill:#5f4d3e; }
.ch .ch-y { font-size:15px; font-variant-numeric:tabular-nums; }
.ch .ch-x { font-size:15px; }
.ch .ch-unit { font-size:13px; fill:#7a6656; }
.ch .ch-v { font-size:15px; font-weight:700; fill:var(--teal2); }
.ch .ch-bar { fill:#8fbcaf; stroke:#2f6f73; stroke-width:2; }
.ch .ch-bar.other { fill:#e4d6bb; stroke:#9a8570; }
.ch .ch-ghost { fill:none; stroke:#b9d6cc; stroke-width:2; stroke-dasharray:6 5; }
.ch .ch-hit { fill:transparent; cursor:pointer; }
.ch .ch-line { fill:none; stroke:#2f6f73; stroke-width:3; stroke-linejoin:round; }
.ch .ch-pt { fill:#fffaf0; stroke:#2f6f73; stroke-width:2.5; }
.pm-chart { width:400px; max-width:100%; }
.pm-chart .ch { width:100%; height:auto; display:block; }
.pm-table { border-collapse:collapse; font-size:22px; align-self:center; }
.pm-table th, .pm-table td { padding:8px 22px; border:2px solid #bfa47c; text-align:center; }
.pm-table th { background:#efe3c9; color:#6b543c; font-weight:700; }
.pm-barstep { display:flex; align-items:center; justify-content:center; gap:12px; }
.pm-barstep .pm-note { margin:0; }
.pm-bs { width:56px; height:56px; border:0; border-radius:16px; background:#eef6f2; color:var(--teal2); font-size:28px; font-weight:800; box-shadow:inset 0 0 0 2px #b9d6cc; display:flex; align-items:center; justify-content:center; }
.pm-body.nokeys { grid-template-columns:1fr; justify-items:center; }
.ledger2.with-views .ribbon { height:36px; } /* 見出しのつまみにかからない短いしおり */
.compact .trade-mode[data-tab="place"] .trade-say { left:auto; right:8px; transform:none; bottom:auto; top:150px; width:206px; } /* 小さい画面は部屋の右の空き（かべのたなにかけない） */
.pm-body > .pm-chart, .pm-body > .pm-table { min-width:0; width:100%; max-width:400px; }
/* 棒をかく問：グラフの右に＋と−（数字キーは出さない） */
.pm-body.nokeys { grid-template-columns:auto 150px; justify-content:center; align-items:center; gap:8px 20px; }
.pm-body.nokeys > .pm-chart { grid-column:1; grid-row:1; width:400px; }
.pm-body.nokeys > .pm-barstep { grid-column:2; grid-row:1; flex-direction:column-reverse; gap:10px; } /* ＋が上、−が下 */
.pm-body.nokeys > .pm-barstep .pm-note { font-size:15px; text-align:center; line-height:1.4; }
.pm-body.nokeys > .pm-answer { display:none; }
.compact .pm-body.nokeys > .pm-chart { width:360px; }
.compact .pm-body > .pm-chart { max-width:330px; }
.trade-mode .tb-src h4 { margin:0; font-size:15px; font-weight:800; color:var(--teal2); letter-spacing:.04em; }
.trade-mode .tb-buy h4 { flex-basis:100%; }
.compact .trade-mode .tb-src h4 { font-size:13px; }
/* iPhone は一覧を3列にして、字とカードを大きく */
.compact .trade-mode .tb-grid { grid-template-columns:repeat(3, 1fr); }
.compact .trade-mode .tb-card { height:112px; }
.compact .trade-mode .tb-name { font-size:14px; }
.compact .trade-mode .tq { font-size:16px; }
.compact .trade-mode .tb-pic img, .compact .trade-mode .tb-pic svg { max-height:50px; }
.compact .trade-mode .ts-hint { font-size:15px; }
.compact .trade-mode .ts-card { width:140px; }
.compact .trade-mode .ts-meta { font-size:13px; }
.compact .trade-mode .ts-at { font-size:13px; }
.pm-barstep .pm-note { word-break:keep-all; overflow-wrap:break-word; }
/* ui17：一覧の見出しは上にはりつく（流しても半分に切れない） */
.trade-mode .tb-head { position:sticky; top:0; z-index:2; margin:0 0 6px; padding:8px 2px 6px; background:linear-gradient(#fffbf2 85%, rgba(255,251,242,0)); }
.compact .trade-mode .tb-head { margin:0 0 4px; padding:4px 2px; }
/* ui17：季節の印（カードの左上の紙のつまみ。丸にしない） */
.trade-mode .tb-card[data-season]::before { content:attr(data-season); position:absolute; left:6px; top:5px; padding:1px 7px; border-radius:4px 4px 4px 0; background:#efe3c9; color:#7a6656; font-size:12px; font-style:normal; font-weight:700; box-shadow:0 1px #dccaa6; rotate:-3deg; pointer-events:none; }
.trade-mode .tb-card[data-now]::before { background:#e7b866; color:#4a3415; box-shadow:0 1px #b98a3a; }
.compact .trade-mode .tb-card[data-season]::before { content:attr(data-season); font-size:11px; left:4px; top:3px; }
/* ui17：季節の贈り物が受け取れる日の札（模様がえの入口の右上。紙のつまみ） */
.paper-shop .shop-doors .decor-door { position:relative; }
.paper-shop .decor-door[data-gift]::after { content:"贈り物"; position:absolute; right:6px; top:-14px; padding:2px 8px; border-radius:5px; background:#c96f7b; color:#fff; font-size:13px; font-weight:800; box-shadow:0 2px #9e4f5a; rotate:6deg; pointer-events:none; }
.trade-mode .decor-card.gift, .decor-mode .decor-card.gift { background:#fbefe9; box-shadow:inset 0 0 0 2px #e6c3b9; }
.decor-mode .decor-card.gift.ready { box-shadow:inset 0 0 0 3px #c96f7b, 0 0 0 3px rgba(255,236,160,.6); }
/* ---- ui17：行事の場面（町の見開きに重ねる紙の飾り。festival.js） ---- */
.town .tw-fest { position:absolute; inset:0; pointer-events:none; z-index:1; }
.town .tw-fest svg { position:absolute; inset:0; width:100%; height:100%; }
.town .tw-fest-paper { filter:drop-shadow(0 3px 2px rgba(60,35,15,.28)); }
.town .tw-fest-paper path[fill]:not([fill=none]), .town .tw-fest-paper polygon, .town .tw-fest-paper ellipse:not(.glow) { stroke:#fffaf0; stroke-width:1.6; }
@media (prefers-reduced-motion: no-preference) { .town .tw-fest-paper { animation:fest-sway 4.5s ease-in-out infinite; transform-origin:50% 0; } @keyframes fest-sway { 50% { transform:translateY(3px) skewX(.6deg); } } }
/* 夜の行事：足もとに灯りの光（人と足もとが読める明るさ）。人の暗さも夕方くらいに */
.town .tw-fest-glow { position:absolute; left:0; right:0; bottom:0; height:46%; background:radial-gradient(ellipse 60% 70% at 50% 100%, rgba(255,226,160,.42), rgba(255,226,160,0) 70%), radial-gradient(ellipse 30% 40% at 18% 100%, rgba(255,220,150,.28), transparent 70%), radial-gradient(ellipse 30% 40% at 82% 100%, rgba(255,220,150,.28), transparent 70%); mix-blend-mode:screen; }
.town .tw-fest-faces { display:flex; justify-content:center; gap:10px; margin:2px 0 6px; }
.paper-scene .slotItem.goods > img { filter:drop-shadow(0 3px 1.5px rgba(60,35,15,.38)); } /* 棚板・台の面に落ちる影 */
.decor-mode .decor-card.gift { background:#fbf5e6; box-shadow:inset 0 0 0 2px #e4cf9a; }
.decor-mode .decor-card.gift.ready { box-shadow:inset 0 0 0 3px #d4a83c, 0 0 0 3px rgba(255,236,160,.6); }
.trade-mode .tb-name { padding:0 4px; }
.town .tw-fest-ground { filter:drop-shadow(0 2px 1px rgba(60,35,15,.3)); }
/* fix38u：遊びの算数の道具（作業台と同じ箱と皿・皿・テープ） */
.pm-toolslot { width:100%; max-width:440px; }
.pm-toolslot svg.pm-tool { width:100%; height:auto; display:block; touch-action:none; }
.compact .pm-toolslot { max-width:330px; }
.ch .ch-line.gap { stroke-dasharray:7 6; stroke-width:2.5; }
.ledger2 .lunits { display:flex; gap:6px; }
.ledger2 .lunit { flex:1; height:44px; border:0; border-radius:12px; background:#f6efdf; color:#6b543c; font-size:15px; font-weight:700; box-shadow:inset 0 0 0 2px #e4d4b2; }
.ledger2 .lunit.on { background:#eef6f2; color:var(--teal2); box-shadow:inset 0 0 0 3px var(--teal); }
.compact .ledger2 .lunit { height:54px; font-size:13px; }
/* fix38u：作業台の前（カードを置く画面）は「作業台へ」をいちばん目立たせる。お店の品の入口はひかえめに（点検38） */
.paper-shop[data-phase=decide] .trade-door { height:48px; padding:0 14px; font-size:15px; font-weight:700; color:#7a6656; background:rgba(255,248,232,.82); box-shadow:none; }
.paper-shop[data-phase=decide] .trade-door img { width:28px; }
.compact .paper-shop[data-phase=decide] .trade-door { height:54px; font-size:12px; padding:0 12px; }
.town .tw-sqx { position:absolute; pointer-events:none; background-size:100% 100%; background-repeat:no-repeat; }
.pm-veil .pm-toolslot svg.pm-tool { position:static; left:auto; top:auto; width:100%; height:auto; overflow:visible; }
/* 道具のある問は紙を広くして、道具を作業台に近い大きさで（押す所は44pt以上） */
.pm-card:has(.pm-toolslot) { width:1010px; }
.pm-body:has(.pm-toolslot) .pm-toolslot { max-width:none; }
.compact .pm-card:has(.pm-toolslot) { width:880px; }
.compact .pm-body:has(.pm-toolslot) .pm-toolslot { grid-column:1 / span 2; grid-row:1; max-width:none; }
.compact .pm-body:has(.pm-toolslot) .pm-answer { grid-column:1 / span 2; grid-row:2; }
.ch-lines .ch-x { font-size:13px; }
/* ui19：「作業台へ」は下のまん中（カードの上・カウンターの前の床）に大きく。P1・カード・扉にかけない */
.paper-shop .bench-go { position:absolute; left:50%; bottom:178px; transform:translateX(-50%); height:64px; padding:0 34px; display:inline-flex; align-items:center; gap:10px; border:0; border-radius:32px; background:var(--teal); color:#fff; font-size:28px; font-weight:800; letter-spacing:.06em; box-shadow:0 5px #1d4a4c, 0 14px 24px -8px rgba(20,40,40,.55); z-index:14; pointer-events:auto; }
.paper-shop .bench-go svg { width:26px; height:26px; }
.paper-shop .bench-go:active { translate:0 3px; box-shadow:0 2px #1d4a4c; }
@media (prefers-reduced-motion: no-preference) { .paper-shop .bench-go { animation:bench-call 1.8s ease-in-out infinite; } @keyframes bench-call { 50% { box-shadow:0 5px #1d4a4c, 0 0 0 9px rgba(255,236,160,.55), 0 14px 24px -8px rgba(20,40,40,.55); } } }
.compact .paper-shop .bench-go { bottom:124px; height:54px; padding:0 40px; font-size:22px; }
.compact .paper-shop .bench-go svg { width:20px; height:20px; }
/* ---- ui20：売り上げ帳の高さ（点検39 重4・Codex H1・M1）。行の所だけ流し、ページ送り・ボタンの場所は先に取る ---- */
.ledger2 .lpage { min-height:0; }
.ledger2 .lbody .lrows { flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; scrollbar-width:thin; }
.ledger2 .lbody .page-nav { flex:none; margin-top:6px; }
.compact .ledger2 tr:nth-child(n+5) { display:table-row; } /* 1ページの日はみな見せる（流して見る） */
.ledger2 tr.today td { background:rgba(232,193,105,.24); }
.ledger2 .used.dayall { color:#7a6656; }
.ledger2 .used.dayall b { font-size:13px; color:var(--teal2); }
.ledger2 .used.dayall .jar svg { width:18px; height:22px; }
.ledger2 .lpage.right { overflow:hidden; }
.ledger2 .lpage.right .grad-shelf { flex:0 1 auto; min-height:0; overflow:hidden; }
.ledger2 .lpage.right .lp-actions { flex:none; margin-top:auto; }
.compact .ledger2 .grad-shelf img { width:54px; }
.compact .ledger2 .money { padding:6px 4px; font-size:16px; }
.compact .ledger2 .money b { font-size:22px; }
.compact .ledger2 .lpage { gap:6px; }
/* ui20：朝の便りの見こみの行（点検39 中10）。数の札は品の絵の右の外、行は罫線2本分 */
.letter-shelf .qty { position:static; align-self:flex-end; margin-left:3px; box-shadow:0 0 0 1px #e0cfae; }
.letter-shelf.today { height:70px; }
.compact .letter-shelf .qty { font-size:14px; line-height:18px; padding:0 4px; }
.compact .letter-shelf .forecast > i, .compact .letter-shelf .prep-was i { font-size:13px; }
/* ui20：作業台の紙の見出しと残りの印（点検39 重5・軽2）。見出しは1行、iPhone でも紙の中に出す。残りの印はヒントの下（問いの文にかけない） */
.atelier .order .from { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* ui23：筆算（右の列の紙）は見出しを出さない（紙の高さが足りず、下の文がはみ出す。fix16u K-DIV-14） */
.compact .atelier:not([data-tool=column]) .order .from { display:block; margin:0 -15px 0; padding:6px 72px 0 15px; font-size:12px; line-height:16px; }
.compact .atelier:not([data-tool=column]) .order .what { padding-top:2px; }
.compact .atelier:not([data-tool=column]) .order { max-height:168px; }
.compact .atelier .order .pace { top:74px; right:6px; bottom:auto; width:58px; flex-wrap:wrap; justify-content:center; gap:4px; }
.compact .atelier .order .pace b { width:11px; height:11px; }
/* ui20：左上の入口（模様がえ・お店の品）を重ねない。贈り物の札は入口の下のふち（画面の上で切れない。点検39 軽10・Codex M2） */
.paper-shop .shop-doors .decor-door { position:relative; left:auto; top:auto; }
.paper-shop .decor-door[data-gift]::after { top:auto; bottom:-12px; right:8px; }
.compact .paper-shop .decor-door[data-gift]::after { bottom:-10px; font-size:12px; }
.compact .decor-mode .decor-say { max-width:470px; } /* ui20：「おわる」にかけない（Codex L1） */
/* ui20：iPhone の模様がえのつまみを画面に収め、カタログのカードの字を大きく（点検39 中12） */
.compact .decor-mode .decor-tabs { min-width:0; }
.compact .decor-mode .decor-tab { min-width:0; padding:0 4px; flex:1 1 0; }
.compact .decor-mode .decor-tab.back { flex:0 0 auto; padding:0 12px; }
.compact .decor-mode .decor-card { width:138px; }
.compact .decor-mode .decor-card b { font-size:14px; }
.compact .decor-mode .decor-card i { font-size:13px; }
.compact .decor-mode .decor-pic { height:34px; }
/* ui20：iPhone の町の地図で、日付の札が場所の印（花畑など）を隠さない・押すのを止めない（点検39 中11） */
.compact .town[data-view=map] .tw-date { pointer-events:none; padding:3px 10px; font-size:13px; opacity:.92; }
/* ui20：手紙箱・住民の帳を開いている間は、うしろ（カードなど）を押せない（点検39 軽7） */
.letter-veil.mail-veil, .letter-veil.book-veil { pointer-events:auto !important; }
/* ui20：お店の品のつまみ。えらんでいるつまみを色で（点検39 軽9） */
.trade-mode .trade-tab.on { background:var(--teal); color:#fff; box-shadow:0 4px #1d4a4c; }
/* ui20：町の季節の層が届くまで、秋・冬は元の絵（夏の緑）の色をおさえる。人・札・紙にはかけない（点検39 重1・Codex M4） */
.town[data-season=冬][data-season-art=none] .tw-world > :not(.tw-folk):not(.tw-hits):not(.tw-wx):not(.tw-fest) { filter:saturate(.5) brightness(1.06) contrast(.94); }
.town[data-season=冬][data-season-art=none][data-place=garden] .tw-world > :not(.tw-folk):not(.tw-hits):not(.tw-wx):not(.tw-fest) { filter:saturate(.22) brightness(1.08) contrast(.9); } /* 花畑の満開を冬に目立たせない */
.town[data-season=秋][data-season-art=none] .tw-world > :not(.tw-folk):not(.tw-hits):not(.tw-wx):not(.tw-fest) { filter:sepia(.22) saturate(1.05) hue-rotate(-12deg); }
/* ui20：iPad は残りの印を見出しの行の右、見出しは小さくして1行に収める（点検39 軽2） */
.atelier .order:has(.pace:not([hidden])) .from { padding-right:96px; }
.atelier .order .pace { top:20px; right:14px; }
.atelier .order .from { font-size:13px; }
/* ui21：「今日はもう話した」の印は頭の上でなく肩の右上に（ミナトさんの紙の帽子など、頭の物をかくさない。点検39 軽5） */
.talked-mark { left:auto; right:-4%; top:22%; margin-left:0; }