:root{--paper:#f2efe7;--ink:#1a1a1a;--mute:#6b675e;--red:#c8102e;--sheet:#8a877f;--white:#fff}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"BIZ UDPGothic",sans-serif;font-size:14px;line-height:1.6}
.mono{font-family:"IBM Plex Mono",monospace}
button,.btn{font:inherit;border:1.5px solid var(--ink);background:var(--paper);color:var(--ink);padding:7px 12px;cursor:pointer;border-radius:0;line-height:1.3;touch-action:manipulation}
button:hover,.btn:hover{background:#e6e1d4}
button:focus-visible,.btn:focus-within,canvas:focus-visible{outline:2px solid var(--red);outline-offset:2px}
button.go{background:var(--red);border-color:var(--red);color:#fff;font-weight:700}
button.go:hover{background:#a50d26}
button.on{background:var(--ink);color:#fff}
button:disabled{opacity:.4;cursor:default}
input[type=file]{position:absolute;width:1px;height:1px;opacity:0}
input[type=range]{flex:1;min-width:80px;accent-color:var(--red)}
select{font:inherit;border:1.5px solid var(--ink);background:#fff;padding:4px 6px;border-radius:0}

/* 見出し */
.bar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:4px 16px;padding:14px 0 10px;border-bottom:3px solid var(--ink)}
.bar h1{margin:0;font-size:22px;letter-spacing:.06em;line-height:1.2}
.bar h1 small{display:block;font-size:11px;letter-spacing:.2em;color:var(--mute);font-weight:400}
.bar p{margin:0;color:var(--mute);font-size:12px;flex:1;min-width:200px}
.bar nav{display:flex;gap:6px}
.bar nav button{padding:4px 10px;font-size:13px}

/* 手順 */
.steps{display:flex;margin:12px 0;padding:0;list-style:none;counter-reset:s;border:1.5px solid var(--ink);background:#fff}
.steps li{flex:1;counter-increment:s;padding:6px 8px;font-size:12px;border-left:1.5px solid var(--ink);color:var(--mute);line-height:1.35}
.steps li:first-child{border-left:0}
.steps li::before{content:counter(s);font-family:"IBM Plex Mono",monospace;font-weight:500;margin-right:6px;color:var(--mute)}
.steps li.now{background:var(--ink);color:#fff}
.steps li.now::before{color:#fff}
.steps li.done{color:var(--ink)}
.steps li.done::before{content:"○";color:var(--ink)}

/* 作業 */
.work{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
@media(max-width:760px){.work{grid-template-columns:1fr}.steps li{font-size:11px;padding:5px 5px}.steps li::before{margin-right:3px}}
h2{font-size:12px;margin:0 0 6px;letter-spacing:.12em;color:var(--mute);font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px}
.chips button{padding:4px 8px;font-size:12px;display:flex;gap:6px;align-items:center}
.chips button .st{font-family:"IBM Plex Mono",monospace;font-size:12px}
.chips button .st.ng{color:var(--red)}
.chips button.on .st.ng{color:#ff9aa8}
.edbox{position:relative;border:1.5px solid var(--ink);background:#d8d5cd}
#ed{display:block;width:100%;aspect-ratio:600/720;touch-action:none;cursor:grab}
#ed.marking{cursor:crosshair}
#ed:active{cursor:grabbing}
#ed.marking:active{cursor:crosshair}
.prompt{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--ink);color:#fff;font-weight:700;font-size:14px}
.prompt[hidden]{display:none}
.prompt b{font-family:"IBM Plex Mono",monospace;color:#ff9aa8;font-weight:500}
.prompt span{flex:1}
.prompt button{background:transparent;color:#fff;border-color:#fff;padding:3px 10px;font-size:12px}
.callout{position:absolute;left:8px;right:8px;bottom:8px;background:#fff;border:1.5px solid var(--ink);padding:6px 10px;font-size:13px}
.callout[hidden]{display:none}
.row{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;align-items:center}
.row label{display:flex;align-items:center;gap:6px;flex:1;min-width:150px;font-size:13px}
.row output{font-family:"IBM Plex Mono",monospace;font-size:12px;min-width:44px;text-align:right}
.row .grow{flex:1}

/* 判定表 */
.checks{width:100%;border-collapse:collapse;margin-top:10px;background:#fff;border:1.5px solid var(--ink);font-size:13px}
.checks caption{caption-side:top;text-align:left;font-size:12px;letter-spacing:.1em;color:var(--mute);font-weight:700;padding-bottom:4px}
.checks td{padding:4px 8px;border-top:1px solid #d6d1c4}
.checks tr:first-child td{border-top:0}
.checks td.v{font-family:"IBM Plex Mono",monospace;text-align:right;white-space:nowrap}
.checks td.r{color:var(--mute);font-size:12px}
@media(max-width:420px){.checks td{padding:4px 5px}.checks td.r{font-size:11px}}
.checks td.s{font-family:"IBM Plex Mono",monospace;text-align:center;width:2em}
.checks tr.ng td.v,.checks tr.ng td.s{color:var(--red);font-weight:700}
.checks tr.warn td.s{color:var(--red)}
.checks tr.na td{color:var(--mute)}
.checks .tag{font-size:10px;border:1px solid currentColor;padding:0 3px;margin-left:4px;color:var(--mute);white-space:nowrap}
.verdict{margin:8px 0 0;padding:6px 10px;border:1.5px solid var(--ink);font-weight:700;background:#fff}
.verdict.ng{border-color:var(--red);color:var(--red)}
.caution{font-size:12px;margin:8px 0 0;padding-left:10px;border-left:3px solid var(--red)}

/* L判 */
.sheetHead{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
#sheetWrap{background:var(--sheet);padding:14px;display:flex;justify-content:center;border:1.5px solid var(--ink)}
#sheet{display:block;max-width:100%;max-height:62vh;background:#fff;box-shadow:0 2px 0 #0005}
.fitmsg{margin:8px 0 0;font-size:13px;min-height:1.6em}
.fitmsg.ng{color:var(--red);font-weight:700}
.counts{width:100%;border-collapse:collapse;margin-top:8px;background:#fff;border:1.5px solid var(--ink)}
.counts td{padding:4px 8px;border-top:1px solid #d6d1c4;font-size:13px}
.counts tr:first-child td{border-top:0}
.counts td.d{font-family:"IBM Plex Mono",monospace;color:var(--mute);font-size:12px;white-space:nowrap}
.counts td.n{white-space:nowrap;text-align:right}
.counts td.n button{width:30px;height:30px;padding:0;font-family:"IBM Plex Mono",monospace}
.counts td.n output{display:inline-block;width:28px;text-align:center;font-family:"IBM Plex Mono",monospace;font-weight:500}
.counts tr.zero td:first-child{color:var(--mute)}
.counts .ng{color:var(--red);font-size:11px;margin-left:4px}
.presets{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.presets button{font-size:12px;padding:4px 8px}
.save{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.save .go{font-size:16px;padding:10px 18px}
.save .warn{color:var(--red);font-size:12px;font-weight:700;flex-basis:100%}
.print{margin-top:12px;background:#fff;border:1.5px solid var(--ink);padding:8px 12px;font-size:12.5px}
.print h3{margin:0 0 4px;font-size:13px}
.print ol{margin:0;padding-left:1.3em}
.print strong{color:var(--red)}
.shareBox{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12px;color:var(--mute)}
.shell-share button{border-radius:0;border:1.5px solid var(--ink);color:var(--ink);background:var(--paper);font-family:"BIZ UDPGothic",sans-serif;font-size:12px;padding:4px 10px}
.shell-share button:hover{background:#e6e1d4}
.shell-share .shell-done{color:var(--ink)}

/* 使い方 */
.howto{margin:36px 0 48px;border-top:3px solid var(--ink);padding-top:8px}
.howto h2{font-size:16px;color:var(--ink);letter-spacing:.04em;margin:22px 0 6px}
.howto p,.howto li{font-size:13.5px}
.howto table{border-collapse:collapse;width:100%;background:#fff;font-size:12.5px}
.howto th,.howto td{border:1px solid #c9c3b4;padding:4px 6px;text-align:left;vertical-align:top}
.howto th{background:#e6e1d4;font-weight:700}
.howto .tbl{overflow-x:auto}
.howto a{color:var(--ink)}
.howto .src{font-size:12px;color:var(--mute);word-break:break-all}

/* 小窓 */
dialog{border:2px solid var(--ink);border-radius:0;background:var(--paper);color:var(--ink);padding:0;width:min(440px,calc(100vw - 24px));max-height:calc(100vh - 40px)}
dialog::backdrop{background:#1a1a1a99}
dialog header{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:var(--ink);color:#fff;font-weight:700}
dialog header button{background:transparent;color:#fff;border-color:#fff;padding:2px 10px;font-size:12px}
dialog .body{padding:12px}
.set{display:grid;grid-template-columns:auto 1fr;gap:10px 12px;align-items:center;font-size:13px}
.set .seg{display:flex;flex-wrap:wrap;gap:0}
.set .seg button{padding:4px 10px;font-size:12px;margin-left:-1.5px}
.set .seg button:first-child{margin-left:0}
.set .note{grid-column:1/-1;font-size:11.5px;color:var(--mute);margin-top:-6px}
.hist{list-style:none;margin:0;padding:0}
.hist li{display:flex;gap:8px;align-items:center;padding:6px 0;border-top:1px solid #c9c3b4;font-size:12.5px}
.hist li:first-child{border-top:0}
.hist li .t{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--mute);white-space:nowrap}
.hist li .w{flex:1}
.hist li button{font-size:11.5px;padding:3px 8px}
.empty{color:var(--mute);font-size:13px}
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:8px 16px;font-size:13px;z-index:10;max-width:calc(100vw - 32px);pointer-events:none;opacity:0;transition:opacity .2s}
.toast.show{opacity:1}