:root{--navy:#253d54;--ink:#1b2b38;--muted:#536578;--bg:#f3f6f9;--line:#c8d3dc;--accent:#176d82;--good:#186746;--danger:#a52e36;--card:#fff}*{box-sizing:border-box}html{font-family:system-ui,-apple-system,"Noto Sans JP",sans-serif;color:var(--ink);background:var(--bg)}body{margin:0}header{background:var(--navy);color:white;padding:18px max(16px,calc((100vw - 900px)/2))}.brand{font-size:1.15rem;font-weight:800;letter-spacing:.04em}header small{color:#e2edf4}main{max-width:900px;margin:auto;padding:16px 12px 60px}footer{border-top:1px solid var(--line);padding:20px;max-width:900px;margin:auto;color:var(--muted);font-size:.85rem;line-height:1.7}.panel{background:var(--card);border:1px solid var(--line);border-radius:15px;padding:16px;margin:0 0 14px;box-shadow:0 2px 8px #20364b0a}.panel h2,.panel h3{margin:0 0 12px}h1{font-size:1.5rem;margin:6px 0 14px;overflow-wrap:anywhere}h2{font-size:1.1rem}h3{font-size:1rem}.muted{color:var(--muted);font-size:.88rem}.row{display:flex;gap:9px;align-items:center;flex-wrap:wrap}.spread{justify-content:space-between}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px}.field{display:block;margin:12px 0;font-size:.9rem;font-weight:650}.field input,.field select,.field textarea{margin-top:6px}input,textarea,select{font:inherit;color:var(--ink);border:1.5px solid #879bad;background:#fff;border-radius:9px;padding:10px 12px;min-height:44px;max-width:100%;width:100%}input[type=checkbox]{width:20px;min-height:20px;accent-color:var(--accent)}input[type=color]{width:70px;padding:3px}textarea{min-height:90px;resize:vertical}button{font:inherit;min-height:44px;border:1.5px solid #9eafbd;border-radius:9px;padding:9px 13px;background:#f6f9fb;color:var(--ink);font-weight:650;cursor:pointer}button.primary{background:var(--navy);color:#fff;border-color:var(--navy)}button.good{background:var(--good);color:#fff;border-color:var(--good)}button.danger{color:var(--danger);border-color:var(--danger)}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #ed9f35;outline-offset:2px}.big{font-size:1.65rem;font-weight:800;font-variant-numeric:tabular-nums}.time{font-size:2rem;font-weight:800;font-variant-numeric:tabular-nums}.counter{border-left:6px solid var(--accent)}.counter .row button{flex:1;min-width:74px}.progress{height:13px;background:#dce6ec;border-radius:20px;overflow:hidden;margin:10px 0}.progress>div{height:100%;background:var(--accent);transition:width .2s}.ok{color:var(--good);font-weight:750}.warning{color:var(--danger);font-weight:700}.details{padding:0;overflow:hidden}.details summary{padding:15px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:800;list-style:none;background:#edf3f7}.details summary::-webkit-details-marker{display:none}.details summary .indicator{background:#d9e6ee;border:1px solid #8fa7b7;border-radius:7px;padding:5px 9px;white-space:nowrap}.details[open] summary{background:#dfeaf1;border-bottom:1px solid var(--line)}.details .body{padding:16px}.details summary .closed{display:inline}.details summary .opened{display:none}.details[open] summary .closed{display:none}.details[open] summary .opened{display:inline}.item{padding:12px 0;border-bottom:1px solid var(--line)}.item:last-child{border-bottom:0}.tiny{font-size:.78rem;color:var(--muted)}.actions{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.actions button{flex-grow:1}.checkboxline{display:flex;align-items:center;gap:8px;margin:10px 0}.checkboxline input{flex:none}.history{max-height:290px;overflow:auto;font-size:.86rem}.history .item{overflow-wrap:anywhere}.sticky{position:sticky;top:0;z-index:5;background:var(--bg);padding:6px 0}.save{font-size:.78rem;color:var(--muted)}#toast{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);background:#20394d;color:white;padding:10px 18px;border-radius:9px;display:none;max-width:90vw;z-index:10}canvas{width:100%;height:auto;border:1px solid var(--line);border-radius:10px} .wrap{overflow-wrap:anywhere} @media(max-width:375px){main{padding:10px 8px 50px}.panel{padding:12px}.details .body{padding:12px}button{padding:8px 10px}.time{font-size:1.7rem}}