:root{font-family:system-ui,-apple-system,"Yu Gothic",Meiryo,sans-serif;color:#17383b;background:#f2f5f2;line-height:1.75;font-size:16px}*{box-sizing:border-box}body{margin:0}.demo-banner{padding:10px 20px;text-align:center;background:#163f42;color:#fff;font-size:.85rem;font-weight:700}main{max-width:1180px;margin:auto;padding:36px 26px}header{padding:12px 0 24px}.eyebrow{color:#467266;font-size:.77rem;font-weight:800;letter-spacing:.13em;margin:0 0 8px}h1{font-size:clamp(1.9rem,4vw,3rem);line-height:1.4;letter-spacing:.02em;margin:0 0 18px}h2{font-size:1.4rem;line-height:1.5;margin:0 0 12px}h3{font-size:1.1rem;margin:20px 0 10px}.lead{color:#4d6260;margin:0}.boundary{background:#e6efea;border-left:4px solid #4d8874;padding:14px 18px;font-size:.85rem}.card{background:#fff;padding:28px;border:1px solid #d7e0da;border-radius:14px;box-shadow:0 8px 24px #163f4206;margin-top:28px}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:12px}label{display:block;font-weight:650;font-size:.85rem}.filter{min-width:220px}.month-field{max-width:320px}input,select{display:block;width:100%;padding:11px 12px;margin-top:6px;border:1px solid #a5bab0;border-radius:6px;font:inherit;color:inherit;background:#fff;min-width:0;min-height:44px}input:focus,select:focus,button:focus-visible,.table-wrap:focus-visible{outline:3px solid #86bca7;outline-offset:3px}input{text-align:right;font-variant-numeric:tabular-nums}.hint{font-size:.8rem;color:#5a6f62;margin:8px 0}.rule{background:#f7f5e9;padding:12px 16px;font-size:.8rem;color:#605a35;margin:20px 0 8px}button{font:inherit;font-weight:650;cursor:pointer;padding:11px 18px;border-radius:6px;border:1px solid #bacbc0;min-height:44px}.quiet{background:#fff;color:#285b48}.primary{background:#175e46;color:#fff;border-color:#175e46}.actions{display:flex;justify-content:flex-end;gap:12px;flex-wrap:wrap;margin-top:24px}table{border-collapse:collapse;width:100%;min-width:780px}caption{text-align:left;font-size:.8rem;color:#607366;padding:8px 0}th,td{padding:12px 10px;border-bottom:1px solid #dbe5dd;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}thead th{background:#e8f0e9;font-size:.85rem}th:first-child,td:first-child{text-align:left}tbody th{font-size:.88rem;text-align:left;font-weight:600}.table-wrap{overflow-x:auto;max-width:100%}.profit-row{background:#f2f7f3;font-weight:700}.profit-row td{border-bottom:2px solid #b2cbbb}.good{color:#146044}.bad{color:#a13b23}.same{color:#52655d}.summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.stat{padding:16px;background:#f3f7f3;border-radius:8px;min-width:0}.stat p{font-size:.8rem;margin:0 0 8px}.stat strong{font-size:clamp(1rem,1.7vw,1.4rem);display:block;overflow-wrap:anywhere;line-height:1.5;font-variant-numeric:tabular-nums}.stat small{display:block;color:#607366;font-size:.75rem;margin-top:8px}.input-head,.input-row{display:grid;grid-template-columns:minmax(170px,1.25fr) repeat(2,minmax(140px,1fr));gap:18px;align-items:center}.input-head{font-size:.8rem;font-weight:700;background:#e8f0e9;padding:8px 16px;margin-top:20px}.input-row{padding:16px;border-bottom:1px solid #dbe5dd}.input-row strong{font-size:.95rem}.input-row label{font-size:.75rem;color:#5a6f62}#confirmation table{min-width:520px}#message:not(:empty){padding:14px;background:#e4f2e9;border:1px solid #82ad91;color:#174c34;margin-top:18px}#message.error:not(:empty){background:#fff0de;border-color:#c99550;color:#7e4219}.reset-area{margin-top:24px}#reset-confirm{padding:16px;background:#f7f5e9;margin-top:12px}#reset-confirm p{margin:0}footer{padding:30px 0 0;text-align:center;color:#627569;font-size:.75rem}[hidden]{display:none!important}h2:focus,h3:focus{outline:3px solid #86bca7;outline-offset:4px}
@media(max-width:740px){main{padding:24px 14px;min-width:0}.card{padding:20px 14px}.section-heading{align-items:stretch;flex-direction:column}.filter{min-width:0}.summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.stat{padding:12px}.stat strong{font-size:1.1rem}.input-head{display:none}.input-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:16px 0}.input-row strong{grid-column:1/-1}.actions>button{width:100%}h1 br{display:none}th,td{padding:10px 8px}.month-field{max-width:none}.boundary{padding:12px}.rule{padding:12px}.reset-area>button{width:100%}}
