/* レジの見た目。外部のフォント・画像を読まない。押す所は 48px 以上。 */
:root { --bg:#fff; --fg:#1a2130; --mut:#687385; --acc:#1f4e79; --accs:#e9f2f6; --bd:#c9d0da; --ok:#1b7a4a; --warn:#b8402b; --warnbg:#fbede9; --sur:#f3f5f8; }
@media (prefers-color-scheme: dark) { :root { --bg:#0f1319; --fg:#e6e9ef; --mut:#9aa5b5; --acc:#6fb2d1; --accs:#172a35; --bd:#2f3744; --ok:#5fcb93; --warn:#ee7f67; --warnbg:#2e1b17; --sur:#161b23; } }
* { box-sizing: border-box; }
html, body { margin:0; height:100%; }
body { background:var(--bg); color:var(--fg); font:16px/1.5 "Hiragino Sans","Noto Sans JP","Yu Gothic",Meiryo,sans-serif; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; }
body.doc { height:auto; -webkit-user-select:text; user-select:text; }
button { font:inherit; color:inherit; background:var(--sur); border:1px solid var(--bd); min-height:48px; min-width:48px; padding:6px 12px; cursor:pointer; touch-action:manipulation; }
button.primary { background:var(--acc); color:#fff; border-color:var(--acc); }
button.warnb { background:var(--warn); color:#fff; border-color:var(--warn); }
button.big { min-height:56px; font-size:18px; }
button:disabled { opacity:.45; cursor:default; }
input, select, textarea { font:inherit; color:inherit; background:var(--bg); border:1px solid var(--bd); min-height:44px; padding:4px 8px; max-width:100%; }
.small { font-size:12px; color:var(--mut); }
.warn { color:var(--warn); }
.ok { color:var(--ok); }
.row { display:flex; justify-content:space-between; gap:8px; margin:2px 0; }
#app { height:100%; display:flex; flex-direction:column; }
.top { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:6px 10px; background:var(--acc); color:#fff; font-size:14px; }
.top b { font-size:16px; }
.top .tag { background:rgba(255,255,255,.2); padding:2px 8px; }
.top .tag.red { background:var(--warn); }
.top .sp { flex:1; }
.top button { min-height:36px; background:rgba(255,255,255,.15); color:#fff; border-color:rgba(255,255,255,.5); }
.banner { padding:6px 10px; font-size:14px; background:var(--warnbg); color:var(--warn); border-bottom:1px solid var(--warn); }
.banner.yellow { background:#fff6cc; color:#5a4a00; border-color:#d9b800; }
.main { flex:1; display:flex; min-height:0; }
.left { flex:1.4; display:flex; flex-direction:column; min-width:0; border-right:1px solid var(--bd); }
.right { flex:1; display:flex; flex-direction:column; min-width:280px; }
.tabs { display:flex; gap:4px; padding:6px; overflow-x:auto; border-bottom:1px solid var(--bd); }
.tabs button.on { background:var(--acc); color:#fff; border-color:var(--acc); }
.grid { flex:1; overflow:auto; padding:8px; display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; align-content:start; }
.item { min-height:84px; text-align:left; display:flex; flex-direction:column; justify-content:space-between; }
.item .nm { font-weight:bold; }
.item .pr { color:var(--mut); }
.item.so { opacity:.6; }
.cart { flex:1; overflow:auto; padding:8px; }
.cl { border-bottom:1px solid var(--bd); padding:6px 0; }
.cl .r1 { display:flex; justify-content:space-between; gap:8px; }
.cl .r2 { display:flex; gap:6px; align-items:center; margin-top:4px; flex-wrap:wrap; }
.cl button { min-height:40px; min-width:40px; }
.sum { padding:8px; border-top:1px solid var(--bd); background:var(--sur); }
.sum .tot { font-size:26px; font-weight:bold; }
.eat { display:flex; gap:8px; padding:8px; }
.eat button { flex:1; min-height:56px; font-size:18px; }
.eat button.on { background:var(--acc); color:#fff; border-color:var(--acc); }
.foot { display:flex; gap:8px; padding:8px; }
.foot button { flex:1; }
.sheet { position:fixed; inset:0; background:rgba(0,0,0,.5); display:flex; align-items:flex-end; justify-content:center; z-index:10; }
.sheet .in { background:var(--bg); width:min(720px,100%); max-height:92%; overflow:auto; padding:14px; border:1px solid var(--bd); }
.sheet h2 { margin:0 0 8px; font-size:20px; }
.keys { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.keys button { min-height:58px; font-size:22px; }
.quick { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; }
.big-n { font-size:34px; font-weight:bold; }
.t { border-collapse:collapse; width:100%; margin:8px 0; }
.t th, .t td { border:1px solid var(--bd); padding:4px 8px; text-align:right; }
.t th:first-child, .t td:first-child { text-align:left; }
.hist button.hrow { display:flex; justify-content:space-between; width:100%; text-align:left; margin:2px 0; }
.dn { display:grid; grid-template-columns:repeat(2,1fr); gap:6px; }
.dn label { display:flex; align-items:center; justify-content:space-between; gap:6px; }
.dn input { width:90px; text-align:right; }
.rc, .rp { max-width:80mm; margin:12px auto; padding:8px; font-size:14px; background:#fff; color:#000; border:1px solid #999; }
.rp { max-width:190mm; }
.rp.help { font-size:16px; line-height:1.8; }
.rc h1, .rp h1 { font-size:20px; text-align:center; margin:4px 0; }
.rc p, .rp p { margin:3px 0; }
.rc .demo, .rp .demo { background:#000; color:#fff; padding:6px; text-align:center; font-weight:bold; }
.rc .reissue { text-align:center; border:1px solid #000; }
.rc .noreg { font-size:12px; border:1px dashed #000; padding:3px; }
.rc .biz { text-align:center; font-weight:bold; font-size:16px; }
.rc .to { font-size:18px; border-bottom:1px solid #000; }
.rc .row.tot { font-size:20px; font-weight:bold; border-top:1px solid #000; }
.ln { width:100%; border-collapse:collapse; }
.ln td { padding:1px 2px; vertical-align:top; }
.ln td.n { text-align:right; white-space:nowrap; }
.ln tr.sub td { font-size:12px; }
.bar { max-width:190mm; margin:8px auto; padding:0 8px; }
.stamp { color:#8a4b00; background:#fff3d6; padding:4px; }
@page { margin: 8mm; }
@media print { .noprint, .bar { display:none !important; } body.doc { background:#fff; } .rc, .rp { border:0; margin:0 auto; } }
@media (max-width: 760px) { .main { flex-direction:column; } .left { border-right:0; flex:1; } .right { min-width:0; flex:1; } }