:root{--bg:#eef1f5;--panel:#fff;--ink:#1d2433;--sub:#5d6678;--line:#d9dee7;--key:#f7f8fb;--key2:#e6eaf1;--op:#2f6fe4;--op-ink:#fff;--eq:#f08a24;--fn:#e9eefb;--m:#e8f5ee;--m-ink:#17794a;--tax:#fff3e6;--tax-ink:#b45b06;--danger:#d2364b;--disp:#152033;--disp-ink:#eaf2ff;--disp-sub:#8fa3c4;--shadow:0 1px 0 rgba(0,0,0,.06),0 2px 6px rgba(20,30,60,.08)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0f141c;--panel:#171e29;--ink:#e7ecf4;--sub:#9aa6b8;--line:#2a3443;--key:#212a37;--key2:#2a3545;--fn:#1f2b44;--m:#173226;--m-ink:#6fdca7;--tax:#3a2a15;--tax-ink:#ffb45e;--disp:#0a0f17;--shadow:0 1px 0 rgba(0,0,0,.4)}}
:root[data-theme=dark]{--bg:#0f141c;--panel:#171e29;--ink:#e7ecf4;--sub:#9aa6b8;--line:#2a3443;--key:#212a37;--key2:#2a3545;--fn:#1f2b44;--m:#173226;--m-ink:#6fdca7;--tax:#3a2a15;--tax-ink:#ffb45e;--disp:#0a0f17;--shadow:0 1px 0 rgba(0,0,0,.4)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Hiragino Sans","Noto Sans JP","Yu Gothic UI","Meiryo",sans-serif;-webkit-text-size-adjust:100%}
.calc-wrap{max-width:1040px;margin:0 auto;padding:12px 16px;display:grid;grid-template-columns:minmax(0,640px) 340px;justify-content:center;gap:16px;align-items:start}
@media (max-width:900px){.calc-wrap{grid-template-columns:1fr;padding:8px 10px}}
#calc{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px;box-shadow:var(--shadow)}
.c-top{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:8px}
.c-more{display:contents}
.c-setbtn{display:none;margin-left:auto;border:1px solid var(--line);background:var(--key);color:var(--ink);border-radius:8px;padding:6px 10px;font-size:13px;cursor:pointer;font-family:inherit}
@media (max-width:520px),(max-height:820px){.c-setbtn{display:inline-block}.c-more{display:none}#calc.opts-open .c-more{display:contents}#calc.opts-open .c-setbtn{background:var(--op);color:#fff;border-color:var(--op)}}
@media (max-width:520px){.c-top>.grp>.seg-l{display:none}}
.taxfree{display:none;align-items:center;background:var(--key);border-left:1px solid var(--line);padding-right:6px}
.taxfree input{width:52px;font-size:15px;padding:4px 4px;border:0;background:transparent;color:var(--ink);font-family:inherit;font-weight:700;text-align:right;-moz-appearance:textfield}
.taxfree input::-webkit-inner-spin-button,.taxfree input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.taxfree i{font-style:normal;font-size:13px;color:var(--ink)}
.seg.editing .taxother{display:none}.seg.editing .taxfree{display:inline-flex;box-shadow:inset 0 0 0 2px var(--op)}
.seg .taxother.on{background:var(--op);color:#fff;font-weight:700}
/* 画面に収める：ボタンの高さは calc.js の fit() が画面の高さから決める */
#calc.fit .ck button{min-height:0;height:var(--kh)}
#calc.fit .fnpad button{height:var(--fh)}
#calc.tight .ck small{display:none}
#calc.fit .ck button{padding:0;line-height:1.1}
#calc[data-mode=fn] .fnpad{margin-bottom:var(--g,7px)}
@media (min-width:900px){#calc[data-mode=fn] .c-keys{display:grid;grid-template-columns:1fr 1fr;gap:7px;align-items:start}#calc[data-mode=fn] .fnpad{margin:0}}
@media (max-height:820px){.c-screen{min-height:92px;padding-top:6px}#c-disp{font-size:2.3em}}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg button{border:0;background:var(--key);color:var(--sub);padding:6px 10px;font-size:13px;cursor:pointer;font-family:inherit}
.seg button+button{border-left:1px solid var(--line)}
.seg button.on{background:var(--op);color:#fff;font-weight:700}
.seg-l{font-size:12px;color:var(--sub);margin:0 2px 0 6px}
.grp{display:inline-flex;align-items:center;white-space:nowrap}
@media (pointer:coarse){.c-foot{display:none}.copyhint{display:none}}
.c-screen{background:var(--disp);color:var(--disp-ink);border-radius:10px;padding:10px 14px 8px;margin-bottom:10px;min-height:100px;position:relative;cursor:copy}
#c-ind{display:flex;gap:6px;font-size:11px;color:var(--disp-sub);min-height:16px}
#c-ind b{background:#2f6fe4;color:#fff;border-radius:4px;padding:0 5px;font-weight:700}
#c-sub{font-size:16px;color:var(--disp-sub);text-align:right;min-height:22px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
#c-disp{font-size:2.6em;line-height:1.15;text-align:right;font-variant-numeric:tabular-nums;font-weight:600;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:clip}
#c-disp.err{color:#ff8b8b}
#c-err{font-size:13px;color:#ffb3b3;text-align:right;min-height:16px}
.copyhint{position:absolute;left:14px;bottom:6px;font-size:11px;color:var(--disp-sub)}
.ck{display:grid;gap:7px;grid-template-columns:repeat(6,minmax(0,1fr))}
.ck button{border:1px solid var(--line);background:var(--key);color:var(--ink);border-radius:10px;font-size:20px;min-height:54px;cursor:pointer;font-family:inherit;touch-action:manipulation;user-select:none;-webkit-user-select:none;transition:transform .05s,background .1s}
.ck button:active,.ck button.hit{transform:translateY(1px);filter:brightness(.92)}
.ck button:focus-visible{outline:3px solid #7aa7ff;outline-offset:1px}
.ck .d{font-weight:600;font-size:23px}
.ck .o{background:var(--op);color:var(--op-ink);border-color:transparent;font-size:24px}
.ck .eq{background:var(--eq);color:#fff;border-color:transparent;font-size:26px}
.ck .cl{color:var(--danger);font-weight:700}
.ck .m{background:var(--m);color:var(--m-ink);font-size:16px;font-weight:700}
.ck .tx{background:var(--tax);color:var(--tax-ink);font-size:16px;font-weight:700}
.ck .f{background:var(--fn);font-size:16px}
.ck .k2{background:var(--key2);font-size:17px}
.ck small{display:block;font-size:10px;color:var(--sub);font-weight:400;margin-top:-2px}
.ck .o small,.ck .eq small{color:rgba(255,255,255,.75)}
.fnpad{display:none;margin-bottom:7px}
#calc[data-mode=fn] .fnpad{display:grid}
#calc[data-mode=fn] .bizonly{visibility:hidden}
#calc:not([data-mode=fn]) .fnonly{display:none}
.big .ck button{min-height:68px;font-size:24px}
.big .ck .d{font-size:28px}
.c-foot{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;font-size:12px;color:var(--sub);align-items:center}
.kb{font-family:ui-monospace,Consolas,monospace;background:var(--key2);border:1px solid var(--line);border-radius:4px;padding:0 4px;font-size:11px;color:var(--ink)}
/* テープ */
.tape{background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);display:flex;flex-direction:column;max-height:640px}
.tape h2{font-size:15px;margin:0;padding:10px 12px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.tape h2 small{color:var(--sub);font-weight:400}
#c-tape{list-style:none;margin:0;padding:6px 12px;overflow:auto;flex:1;min-height:180px;font-variant-numeric:tabular-nums}
#c-tape li{border-bottom:1px dashed var(--line);padding:6px 0;font-size:14px}
#c-tape li.nt{color:var(--sub);font-size:12px}
#c-tape li.empty{color:var(--sub);font-size:12px;border:0;padding:20px 0;text-align:center}
#c-tape .tl{color:var(--sub);text-align:right;overflow-wrap:anywhere}
#c-tape .tr{display:flex;justify-content:space-between;align-items:center}
#c-tape .lb{font-size:12px;color:var(--sub)}
#c-tape .tv{border:0;background:none;font-size:18px;font-weight:700;color:var(--ink);cursor:pointer;font-family:inherit;padding:2px 4px;border-radius:6px}
#c-tape .tv:hover{background:var(--key2)}
#c-tape .tm{font-size:12px;color:var(--m-ink)}
.tape-act{display:flex;flex-wrap:wrap;gap:6px;padding:8px 12px;border-top:1px solid var(--line)}
.tape-act button{border:1px solid var(--line);background:var(--key);color:var(--ink);border-radius:8px;padding:6px 10px;font-size:13px;cursor:pointer;font-family:inherit}
.tape-act button.del{color:var(--danger)}
.tape-note{font-size:11px;color:var(--sub);padding:0 12px 10px}
.tape-note a{color:var(--op);font-weight:700}
.tape-keep{margin:0;padding:6px 12px;font-size:12px;font-weight:700;color:var(--m-ink);background:var(--m);border-bottom:1px solid var(--line)}
#c-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:#1d2433;color:#fff;padding:8px 14px;border-radius:999px;font-size:14px;opacity:0;pointer-events:none;transition:.2s;z-index:50}
#c-toast.show{opacity:1;transform:translateX(-50%)}
@media (max-width:520px){.ck{gap:5px}.ck button{min-height:50px;font-size:18px;border-radius:9px}.ck .d{font-size:21px}#c-disp{font-size:2.2em}.seg button{padding:6px 8px;font-size:12px}}
@media print{body.print-tape *{visibility:hidden}body.print-tape .tape,body.print-tape .tape *{visibility:visible}body.print-tape .tape{position:absolute;left:0;top:0;width:100%;max-height:none;border:0;box-shadow:none}body.print-tape .tape-act,body.print-tape .tape-note,body.print-tape .tape-keep{display:none}#c-tape{overflow:visible}}
