/* 追加ページ共通（試作）。index.htmlと同じ配色トークン */
:root{--bg:#f7f7f4;--card:#fff;--text:#1f2328;--sub:#59636e;--line:#d8dce0;--accent:#1a5fb4}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#15171a;--card:#1e2125;--text:#e8eaed;--sub:#a0a8b0;--line:#343a40;--accent:#6ea8fe}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.8 -apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",system-ui,sans-serif}
main{max-width:640px;margin:0 auto;padding:20px 16px 48px}
h1{font-size:1.3rem;line-height:1.4;margin:8px 0 12px}
h2{font-size:1.05rem;margin:24px 0 6px}
a{color:var(--accent)}
nav{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:.9rem;margin-bottom:12px}
.meta{color:var(--sub);font-size:.85rem}
.box{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 16px}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
/* 手数料計算ページ */
.calc{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;margin:12px 0}
.calc label{display:block;font-weight:600;margin:10px 0 4px}
.calc .yen{display:flex;align-items:center;gap:8px}
.calc input,.calc select{font-size:1.05rem;padding:10px 12px;border:1px solid #767d85;border-radius:8px;background:var(--bg);color:var(--text);width:100%}
.calc input{text-align:right;flex:1;min-width:0}
.calc .unit{color:var(--sub)}
.calc button{font:inherit;font-weight:600;padding:12px 18px;border-radius:10px;border:0;background:var(--accent);color:#0b1b33;cursor:pointer;width:100%;margin-top:12px}
@media (prefers-color-scheme: light){.calc button{color:#fff}}
:root[data-theme="light"] .calc button{color:#fff}
.out{margin-top:12px}
.out:empty{display:none}
.out dl{display:grid;grid-template-columns:1fr auto;gap:4px 12px;margin:0 0 8px}
.out dt{color:var(--sub)} .out dd{margin:0;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.out .big{font-size:1.2rem}
.sep{border-top:1px solid var(--line);margin:8px 0;padding-top:8px}
.small{font-size:.88rem;color:var(--sub)}
ul.links{padding-left:1.2em}
.tablewrap{overflow-x:auto;margin:8px 0}
table{border-collapse:collapse;width:100%;font-size:.92rem;font-variant-numeric:tabular-nums}
th,td{border:1px solid var(--line);padding:6px 8px;text-align:right}
th[scope=row],thead th{text-align:left;background:var(--card)}
caption{text-align:left;padding:4px 0}
label.check{display:flex;gap:8px;align-items:center;font-weight:400;margin:10px 0}
label.check input{width:auto}