/* Generated by build-css.cjs from 28 files. Do not edit; edit the sources and rebuild. */ /* styles.css */ :root{--ink:#1d2521;--muted:#68716c;--paper:#f5f3ed;--card:#fffdf8;--line:#dcded8;--green:#206a4a;--green2:#2f8a61;--mint:#dcecdf;--orange:#e56d36;--shadow:0 18px 50px rgba(30,45,36,.09)} *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Noto Sans TC",system-ui,sans-serif;font-size:16px;line-height:1.5}.topbar{height:72px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 max(24px,calc((100vw - 1280px)/2));background:rgba(245,243,237,.9);backdrop-filter:blur(12px);position:sticky;top:0;z-index:10}.topbar p{font-size:13px;color:var(--muted);letter-spacing:.08em}.brand{display:flex;gap:11px;align-items:center;text-decoration:none;color:var(--ink);font-weight:700;font-size:19px}.brand-mark{width:29px;height:29px;background:var(--green);border-radius:8px;display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:6px;transform:rotate(-3deg)}.brand-mark i{display:block;border:1.5px solid #fff;border-radius:2px}.brand-mark i:last-child{transform:translateY(3px)}main{max-width:1280px;margin:auto;padding:54px 24px 80px}.intro{display:flex;justify-content:space-between;align-items:end;margin-bottom:40px}.eyebrow{font-family:"Roboto Mono",monospace;font-size:11px;letter-spacing:.18em;color:var(--green2);font-weight:600}.intro h1{font-size:clamp(34px,4vw,58px);line-height:1.1;letter-spacing:-.04em;margin:12px 0 14px}.intro>div>p{color:var(--muted);margin:0;font-size:17px}.intro-note{display:grid;grid-template-columns:auto auto;gap:7px 12px;border-left:1px solid var(--line);padding-left:28px;margin-bottom:4px;font-size:12px}.intro-note span{font-family:"Roboto Mono";color:var(--orange)}.intro-note p{margin:0;color:var(--muted)}.workspace{display:grid;grid-template-columns:380px 1fr;background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);overflow:hidden}.controls{padding:29px;border-right:1px solid var(--line);background:#fbfaf5}.section-heading{display:flex;align-items:center;justify-content:space-between;font-weight:700;margin-bottom:12px}.section-heading select{border:1px solid var(--line);background:#fff;border-radius:8px;padding:8px 10px;color:var(--ink)}fieldset{border:0;border-top:1px solid var(--line);padding:22px 0;margin:0}legend{padding:0 8px 0 0;font-weight:600;font-size:14px}legend span{display:inline-grid;place-items:center;width:24px;height:24px;background:var(--mint);color:var(--green);border-radius:50%;font-family:"Roboto Mono";font-size:11px;margin-right:8px}.presets{display:flex;gap:6px;margin:14px 0 13px}.presets button{flex:1;border:1px solid var(--line);background:white;border-radius:7px;padding:7px 4px;color:var(--muted);cursor:pointer;transition:.2s}.presets button:hover{border-color:var(--green2);color:var(--green)}.presets button.active{background:var(--green);border-color:var(--green);color:white}.dimension-row{display:flex;gap:8px;align-items:flex-end}.dimension-row>span{padding-bottom:11px;color:#9aa19d}.dimension-row label,.full-field{font-size:12px;color:var(--muted);position:relative;display:block;flex:1}.dimension-row input,.full-field input{width:100%;height:44px;margin-top:5px;border:1px solid var(--line);border-radius:8px;background:#fff;padding:0 42px 0 12px;font-family:"Roboto Mono";font-size:14px;color:var(--ink);outline:none}.dimension-row input:focus,.full-field input:focus,select:focus{border-color:var(--green2);box-shadow:0 0 0 3px rgba(47,138,97,.13)}label small{position:absolute;right:11px;bottom:12px;color:#9aa19d}.full-field input{margin-top:7px}.switch-row{display:flex;align-items:center;justify-content:space-between;margin-top:18px;cursor:pointer}.switch-row span{display:flex;flex-direction:column}.switch-row b{font-size:13px}.switch-row small{position:static;font-size:11px}.switch-row input{position:absolute;opacity:0}.switch-row i{width:45px;height:25px;background:#ccd1cd;border-radius:20px;position:relative;transition:.2s}.switch-row i:after{content:"";position:absolute;width:19px;height:19px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 2px 5px #0002}.switch-row input:checked+i{background:var(--green)}.switch-row input:checked+i:after{transform:translateX(20px)}.switch-row input:focus-visible+i{outline:3px solid rgba(47,138,97,.25)}.calculate{width:100%;height:50px;border:0;background:var(--orange);color:#fff;border-radius:9px;font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;box-shadow:0 8px 18px rgba(229,109,54,.2);transition:.2s}.calculate:hover{background:#d65c27;transform:translateY(-1px)}.calculate svg,.tip svg{width:21px;fill:none;stroke:currentColor;stroke-width:1.8}.result{padding:36px 42px;background:var(--card)}.result-top{display:flex;justify-content:space-between;align-items:center}.result h2{margin:6px 0 0;font-size:25px}.status{background:var(--mint);color:var(--green);font-size:12px;padding:7px 11px;border-radius:20px}.status i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green2);margin-right:6px}.metrics{display:grid;grid-template-columns:1.4fr 1fr 1fr;margin:28px 0 22px;border:1px solid var(--line);border-radius:12px;overflow:hidden}.metrics article{padding:17px 20px;display:grid;grid-template-columns:1fr auto;align-items:end;border-left:1px solid var(--line)}.metrics article:first-child{border:0}.metrics span{grid-column:1/-1;color:var(--muted);font-size:11px}.metrics strong{font-family:"Roboto Mono";font-size:28px;line-height:1.2}.metrics small{color:var(--muted);font-size:11px;padding-bottom:4px}.metrics .primary-metric{background:#eff6f0}.primary-metric strong{color:var(--green);font-size:36px}.plan-card{border:1px solid var(--line);border-radius:12px;overflow:hidden}.plan-head{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line)}h3{font-size:14px;margin:0}.plan-head p{font-size:11px;color:var(--muted);margin:3px 0 0}.legend{display:flex;gap:13px;font-size:10px;color:var(--muted)}.legend span{display:flex;align-items:center;gap:5px}.legend i{width:11px;height:11px;border-radius:2px}.swatch-piece{background:var(--green2)}.swatch-waste{background:#e9e7df;border:1px dashed #aaa}.canvas-wrap{height:330px;padding:26px 46px 38px 58px;display:flex;align-items:center;justify-content:center;position:relative;background-color:#f3f1eb;background-image:linear-gradient(#deded8 1px,transparent 1px),linear-gradient(90deg,#deded8 1px,transparent 1px);background-size:20px 20px}#layoutCanvas{position:relative;background:#e7e4db;border:2px solid var(--ink);box-shadow:4px 6px 0 #d1cec4;max-width:100%;max-height:100%;transition:.25s}.cut-piece{position:absolute;background:#dcecdf;border:1px solid #2f8a61;display:grid;place-items:center;color:#145638;font:600 10px "Roboto Mono";overflow:hidden}.cut-piece.rotated{background:#cfe4d5}.measure{position:absolute;font:500 10px "Roboto Mono";color:var(--muted)}.measure-w{bottom:13px;left:50%;transform:translateX(-50%)}.measure-h{left:9px;top:50%;transform:translateY(-50%) rotate(-90deg)}.plan-foot{display:grid;grid-template-columns:repeat(3,1fr);padding:13px 20px;background:#faf9f5}.plan-foot div{display:flex;flex-direction:column;border-left:1px solid var(--line);padding-left:17px}.plan-foot div:first-child{border:0;padding-left:0}.plan-foot span{font-size:10px;color:var(--muted)}.plan-foot b{font:600 12px "Roboto Mono";margin-top:3px}.tip{display:flex;gap:12px;margin-top:17px;padding:13px 16px;background:#fff5e9;border:1px solid #f4d5b3;border-radius:9px;color:#995127}.tip svg{flex:0 0 21px}.tip b{font-size:12px}.tip p{font-size:11px;margin:2px 0 0;color:#996f52}footer{max-width:1280px;margin:auto;padding:0 24px 30px;display:flex;justify-content:space-between;font-size:11px;color:#919793}@media(max-width:900px){.intro-note{display:none}.workspace{grid-template-columns:1fr}.controls{border-right:0;border-bottom:1px solid var(--line)}.result{padding:30px}.canvas-wrap{height:300px}}@media(max-width:600px){.topbar{height:62px}.topbar p{display:none}main{padding:32px 14px 50px}.intro{margin-bottom:25px}.intro h1{font-size:36px}.intro>div>p{font-size:14px}.workspace{border-radius:14px}.controls,.result{padding:22px 17px}.metrics{grid-template-columns:1fr 1fr}.metrics article{border-bottom:1px solid var(--line)}.metrics .primary-metric{grid-column:1/-1}.metrics article:nth-child(2){border-left:0}.canvas-wrap{height:280px;padding:24px 36px 35px 45px}.plan-head{align-items:flex-start}.legend{flex-direction:column;gap:3px}.plan-foot{padding:12px}.plan-foot div{padding-left:10px}.plan-foot b{font-size:10px}footer{flex-direction:column;gap:5px;padding:0 14px 25px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}} /* animation.css */ .plan-actions{display:flex;align-items:center;gap:16px}.play-cuts{min-height:44px;border:0;border-radius:8px;background:var(--green);color:#fff;padding:0 13px;display:flex;align-items:center;gap:7px;font:600 12px "Noto Sans TC",sans-serif;cursor:pointer;transition:background .2s,box-shadow .2s}.play-cuts:hover{background:#18583d;box-shadow:0 5px 12px rgba(32,106,74,.2)}.play-cuts:focus-visible{outline:3px solid rgba(47,138,97,.28);outline-offset:2px}.play-cuts svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8}.play-cuts.is-playing svg{animation:pulse-play .8s ease-in-out infinite alternate}.cut-line{position:absolute;z-index:4;pointer-events:none;opacity:0}.cut-line.vertical{width:3px;background:var(--orange);transform:scaleY(0);transform-origin:top}.cut-line.horizontal{height:3px;background:var(--orange);transform:scaleX(0);transform-origin:left}.cut-line::after{content:attr(data-step);position:absolute;width:20px;height:20px;border-radius:50%;background:var(--orange);color:#fff;display:grid;place-items:center;font:600 9px "Roboto Mono";box-shadow:0 2px 6px #0003}.cut-line.vertical::after{top:2px;left:5px}.cut-line.horizontal::after{top:5px;left:2px}.cut-line.revealed{opacity:1}.cut-line.vertical.revealed{transform:scaleY(1);transition:transform .55s ease,opacity .15s}.cut-line.horizontal.revealed{transform:scaleX(1);transition:transform .55s ease,opacity .15s}.cut-line.current{filter:drop-shadow(0 0 4px rgba(229,109,54,.75))}.cut-sequence{border-top:1px solid var(--line);background:#f7f6f1;padding:16px 20px}.sequence-status{display:flex;align-items:center;gap:12px}.step-badge{flex:0 0 auto;min-width:48px;padding:6px 8px;border-radius:6px;background:#e5e8e4;color:var(--muted);text-align:center;font:600 10px "Roboto Mono"}.step-badge.active{background:#fff0e7;color:#bd5426}.sequence-status b{font-size:12px}.sequence-status p{font-size:10px;color:var(--muted);margin:2px 0 0}.cut-sequence ol{display:flex;gap:7px;list-style:none;margin:13px 0 0;padding:0;overflow-x:auto;scrollbar-width:thin}.cut-sequence li{flex:0 0 auto;min-width:96px;border:1px solid var(--line);border-radius:7px;background:#fff;padding:8px 10px;color:var(--muted);font-size:10px;transition:.2s}.cut-sequence li b{display:block;color:var(--ink);font:600 10px "Roboto Mono";margin-bottom:2px}.cut-sequence li.done{border-color:#a9cbb5;background:#eff6f0}.cut-sequence li.current{border-color:var(--orange);background:#fff5e9;box-shadow:0 0 0 2px rgba(229,109,54,.12)}@keyframes pulse-play{to{opacity:.55}}@media(max-width:700px){.plan-head{gap:12px}.plan-actions{flex-direction:column;align-items:flex-end;gap:8px}.play-cuts span{display:none}.play-cuts{width:44px;padding:0;justify-content:center}.cut-sequence{padding:14px 12px}}@media(prefers-reduced-motion:reduce){.play-cuts.is-playing svg{animation:none}.cut-line.revealed{transition:none!important}} /* cut-position.css */ .cut-position { display:block; margin-top:6px; color:#934016; font:600 14px/1.5 system-ui,sans-serif; overflow-wrap:anywhere; } .cut-sequence li { max-width:290px; white-space:normal; cursor:pointer; } .cut-position-note { margin:12px 0 0; color:var(--muted); font:400 13px/1.6 system-ui,sans-serif; } .sequence-status > div { min-width:0; } /* Cut lines drawn by cut-stepper.js: earlier cuts faint, current cut solid, no number bubble. */ .step-line{opacity:1!important;transform:none!important;z-index:4} .step-line::after{content:none} .step-line.done{opacity:.38!important;background:var(--orange)!important} .step-line.current{background:var(--orange)!important;filter:drop-shadow(0 0 3px rgba(229,109,54,.55))} .step-line.current.vertical{animation:cut-draw-y .45s ease} .step-line.current.horizontal{animation:cut-draw-x .45s ease} @keyframes cut-draw-y{from{transform:scaleY(0)!important}} @keyframes cut-draw-x{from{transform:scaleX(0)!important}} @media(prefers-reduced-motion:reduce){.step-line.current{animation:none}} /* Stepper under each drawing: ‹ 4 / 7 · ↑ 26.76 cm › ▶ plus a slider. */ .has-cut-stepper{padding-bottom:112px!important} .cut-stepper{position:absolute;left:16px;right:16px;bottom:14px;display:grid;gap:6px} .cut-stepper[hidden]{display:none} .cut-stepper-row{display:grid;grid-template-columns:44px minmax(0,1fr) 44px 44px;gap:6px;align-items:center} .cut-stepper button{min-height:40px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);font:600 20px/1 system-ui,sans-serif;cursor:pointer;display:grid;place-items:center;padding:0} .cut-stepper button:disabled{opacity:.35;cursor:default} .cut-stepper button:focus-visible,.cs-slider:focus-visible{outline:2px solid var(--green);outline-offset:2px} .cut-stepper .cs-play{background:var(--green);border-color:var(--green);color:#fff} .cut-stepper .cs-play svg{width:18px;height:18px;fill:currentColor} .cs-info{text-align:center;min-width:0;font:700 15px/1.3 "Roboto Mono",system-ui,sans-serif;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap} .cs-slider{-webkit-appearance:none;appearance:none;width:100%;height:24px;margin:0;background:transparent;cursor:pointer} .cs-slider::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:#ddd8cc} .cs-slider::-moz-range-track{height:4px;border-radius:2px;background:#ddd8cc} .cs-slider::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-7px;border-radius:50%;background:var(--orange);border:2px solid #fff;box-shadow:0 1px 3px #0003} .cs-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--orange);border:2px solid #fff} .layout-preview.with-cut-positions{padding-top:56px;min-height:360px} .with-cut-positions .sheet-stack{width:100%;max-width:240px;height:210px;cursor:default} .with-cut-positions .sheet-stack .standard-cut-front{transform:none!important;filter:none} .with-cut-positions .sheet-stack:hover .layout-preview-canvas:not(.standard-cut-front),.with-cut-positions .sheet-stack:focus .layout-preview-canvas:not(.standard-cut-front){transform:translate(var(--stack-x),var(--stack-y)) rotate(var(--stack-angle))} .canvas-wrap .current-layout{padding:56px 32px 36px 44px} .current-layout.has-cut-stepper .measure-w{bottom:88px} /* Lines for all cuts in overview mode. */ .step-line.overview{opacity:.8!important;background:var(--orange)!important} .step-line.overview.vertical{width:2px} .step-line.overview.horizontal{height:2px} /* Overview mode (default): chain dimensions give the spacing between neighbouring cuts of each strip. */ .dim-chain{position:absolute;z-index:6;pointer-events:none;color:#274536;border-color:#7d8f84} .dim-chain.top{left:0;right:0;top:calc(-14px - var(--lane)*26px);height:0;border-top:1px solid #7d8f84} .dim-chain.left{top:0;bottom:0;left:calc(-14px - var(--lane)*48px);width:0;border-left:1px solid #7d8f84} .dim-chain.right{top:0;bottom:0;left:calc(100% + 14px + var(--lane)*48px);width:0;border-left:1px solid #7d8f84} .dim-tick{position:absolute} .dim-chain.top .dim-tick{top:-4px;height:8px;border-left:1px solid #7d8f84} .dim-chain.left .dim-tick,.dim-chain.right .dim-tick{left:-4px;width:8px;border-top:1px solid #7d8f84} .dim-value{position:absolute;padding:0 2px;border-radius:3px;background:rgba(255,253,248,.92);font:600 12px/1.3 system-ui,sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap} .dim-chain.top .dim-value{bottom:3px;transform:translateX(-50%)} .dim-chain.left .dim-value{right:5px;transform:translateY(-50%)} .dim-chain.right .dim-value{left:5px;transform:translateY(-50%)} [data-cut-view=overview] .layout-preview.with-cut-positions,[data-cut-view=overview] .canvas-wrap .current-layout{padding-top:calc(52px + var(--dim-top,0)*26px)!important;padding-left:calc(24px + var(--dim-left,0)*48px)!important;padding-right:calc(24px + var(--dim-right,0)*48px)!important} [data-cut-view=overview] #playCuts,[data-cut-view=overview] .current-layout .measure-h{display:none} /* Animation mode: numbered cut positions outside the paper like a ruler; the current cut stands out. */ .ruler-tag{position:absolute;z-index:7;display:flex;align-items:center;gap:3px;padding:1px 6px 1px 2px;border:1px solid #efb99a;border-radius:10px;background:#fffaf4;color:#934016;font:700 12px/1.4 system-ui,sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap;transition:opacity .2s} .ruler-tag b{display:grid;place-items:center;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:#934016;color:#fff;font-size:12px;line-height:1} .ruler-tag.upcoming{opacity:.45} .ruler-tag.current{background:#934016;border-color:#934016;color:#fff;box-shadow:0 1px 4px #0003} .ruler-tag.current b{background:#fff;color:#934016} .ruler-tag::after{content:"";position:absolute;pointer-events:none} .ruler-tag.vertical{top:0;transform:translate(-50%,calc(-100% - 8px - var(--lane)*24px))} .ruler-tag.vertical::after{left:50%;top:100%;height:calc(8px + var(--lane)*24px);border-left:1px dashed #d88a5c} .ruler-tag.horizontal{left:0;transform:translate(calc(-100% - 8px - var(--lane)*78px),-50%)} .ruler-tag.horizontal::after{top:50%;left:100%;width:calc(8px + var(--lane)*78px);border-top:1px dashed #d88a5c} [data-cut-view=step] .layout-preview.with-cut-positions,[data-cut-view=step] .canvas-wrap .current-layout{padding-top:calc(52px + var(--ruler-rows,0)*24px)!important;padding-left:calc(24px + var(--ruler-cols,0)*78px)!important} /* A standard layout repeated on several sheets is drawn once with a count badge. */ .repeat-badge{position:absolute;z-index:8;right:-10px;bottom:-12px;padding:3px 9px;border-radius:12px;background:var(--ink);color:#fff;font:700 13px/1.3 system-ui,sans-serif;box-shadow:0 2px 6px #0003;white-space:nowrap} /* Page-wide switch between overview and step-by-step viewing. */ .cut-view-toggle{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:600 14px/1.4 system-ui,sans-serif;color:var(--ink);cursor:pointer;white-space:nowrap} .cut-view-toggle input{appearance:none;-webkit-appearance:none;position:relative;width:40px;height:24px;margin:0;border-radius:12px;background:#cfd6cf;cursor:pointer;transition:background .2s} .cut-view-toggle input::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0003;transition:transform .2s} .cut-view-toggle input:checked{background:var(--green)} .cut-view-toggle input:checked::after{transform:translateX(16px)} .cut-view-toggle input:focus-visible{outline:2px solid var(--green);outline-offset:2px} /* Keep the grid legend top-right and the paper height label clear of the left-hand ruler. */ .scale-grid-panel .scale-legend{top:12px;bottom:auto} [data-cut-view=step] .current-layout .measure-h{left:auto;right:5px;transform:translateY(-50%) rotate(90deg)} /* visitor-counter.css */ .footer-brand { display:flex; flex-direction:column; gap:6px; } .visitor-counter { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px; font:400 13px/1.5 system-ui,sans-serif; color:var(--muted); } .visitor-counter output { font-weight:600; font-variant-numeric:tabular-nums; color:var(--green); } /* grain-ui.css */ .grain-settings{margin-top:8px}.grain-toggle{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 0;font-size:14px;font-weight:500;line-height:1.5;cursor:pointer}.grain-toggle input{width:20px;height:20px;flex:0 0 20px;margin:0;accent-color:#20694e}.grain-settings [hidden],.grain-target[hidden],.grain-summary[hidden]{display:none!important} .job-item .grain-choices button{color:#263e31;font-size:14px}.job-item .grain-choices button[aria-pressed=true]{color:#20694e}.job-item .grain-target>span{font-size:14px} #grainSource,.grain-target{border-top:1px solid #d7ded6;padding-top:10px;margin-top:8px;font-size:14px;min-width:0}.grain-target>span{display:block;margin-top:8px}.grain-choices{display:flex;gap:8px;margin:8px 0 14px}.grain-choices button{flex:1;min-width:0;min-height:44px;border:1px solid #bcc9bf;border-radius:8px;background:#fff;color:#263e31;padding:8px;font:inherit;cursor:pointer;white-space:normal}.grain-choices button[aria-pressed=true]{border-color:#20694e;background:#edf5ee;box-shadow:inset 0 0 0 1px #20694e;font-weight:600}.grain-choices button:focus-visible,.grain-toggle input:focus-visible{outline:3px solid #c45525;outline-offset:3px}.grain-icon{display:block;width:22px;height:29px;border:1px solid #20694e;margin:2px auto 7px;background:repeating-linear-gradient(90deg,transparent 0 5px,#20694e88 5px 6px)}.grain-icon.width{background:repeating-linear-gradient(0deg,transparent 0 5px,#20694e88 5px 6px)}.grain-error{font-size:14px;color:#a64417}.job-item .grain-target{grid-column:1/-1;width:100%}.grain-summary{display:flex;flex-wrap:wrap;gap:6px 14px;padding:12px 20px;background:#edf5ee;color:#24513b;font-size:14px}.grain-summary span:last-child{flex-basis:100%;font-size:13px} [data-grain=height] .cut-piece{background-image:repeating-linear-gradient(90deg,transparent 0 12px,#20694e24 12px 13px)}[data-grain=width] .cut-piece{background-image:repeating-linear-gradient(0deg,transparent 0 12px,#20694e24 12px 13px)}.grain-playing[data-grain=height] .cut-piece{animation:grain-flow-y 1.4s linear infinite}.grain-playing[data-grain=width] .cut-piece{animation:grain-flow-x 1.4s linear infinite}@keyframes grain-flow-y{to{background-position:13px 0}}@keyframes grain-flow-x{to{background-position:0 13px}}@media(prefers-reduced-motion:reduce){.grain-playing .cut-piece{animation:none!important}} /* layout-fix.css */ html,body{max-width:100%;overflow-x:hidden}main,.workspace,.controls,.result,.plan-card,.canvas-wrap{min-width:0}.workspace{width:100%}.result{overflow:hidden}.metrics article{min-width:0}.metrics strong{font-size:clamp(21px,3vw,28px);overflow-wrap:anywhere}.primary-metric strong{font-size:clamp(28px,4vw,36px)}.size-chooser{margin:14px 0 13px}.selected-size{width:100%;min-height:58px;border:1px solid var(--line);border-radius:9px;background:#fff;padding:9px 12px;display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;color:var(--ink);cursor:pointer;transition:.2s}.selected-size:hover{border-color:var(--green2);box-shadow:0 0 0 3px rgba(47,138,97,.08)}.selected-size>span{display:flex;flex-direction:column}.selected-size>span:last-child{display:block;color:var(--green);font-size:11px;white-space:nowrap}.selected-size small{font-size:10px;color:var(--muted)}.selected-size b{font-size:15px}.feasibility{display:flex;gap:11px;margin:-4px 0 20px;padding:13px 15px;border:1px solid #b9d5c1;background:#eff6f0;border-radius:9px}.feasibility svg{flex:0 0 22px;width:22px;height:22px;border-radius:50%;background:var(--green);color:#fff;padding:4px;fill:none;stroke:currentColor;stroke-width:2.5}.feasibility b{font-size:12px}.feasibility p{margin:2px 0 0;color:#4f6659;font-size:11px}.size-dialog{width:min(720px,calc(100vw - 28px));max-height:min(720px,calc(100dvh - 28px));padding:0;border:0;border-radius:16px;background:var(--card);box-shadow:0 25px 80px rgba(20,30,24,.3);overflow:hidden}.size-dialog::backdrop{background:rgba(21,29,24,.55);backdrop-filter:blur(3px)}.dialog-head{display:flex;align-items:center;justify-content:space-between;padding:23px 25px 15px}.dialog-head h2{margin:5px 0 0}.dialog-head>button{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--ink);font-size:25px;cursor:pointer}.size-tabs{display:flex;gap:7px;padding:0 25px}.size-tabs button{min-height:44px;border:1px solid var(--line);border-radius:8px;background:#fff;padding:0 16px;color:var(--muted);font-weight:600;cursor:pointer}.size-tabs button.active{background:var(--green);border-color:var(--green);color:#fff}.family-help{margin:14px 25px 10px;color:var(--muted);font-size:12px}.size-grid{padding:4px 25px 20px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;max-height:400px;overflow-y:auto}.size-option{min-height:67px;border:1px solid var(--line);border-radius:9px;background:#fff;padding:10px 12px;text-align:left;cursor:pointer;transition:.2s}.size-option:hover,.size-option:focus-visible{border-color:var(--green2);background:#eff6f0}.size-option b{display:block;font-size:14px}.size-option span{display:block;color:var(--muted);font:500 10px "Roboto Mono";margin-top:4px}.dialog-foot{border-top:1px solid var(--line);padding:13px 25px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:#faf9f5;color:var(--muted);font-size:11px}.dialog-foot button{min-height:44px;border:0;border-radius:8px;background:#e7ebe7;color:var(--green);padding:0 14px;font-weight:600;cursor:pointer}.canvas-wrap{width:100%}#layoutCanvas{flex:0 1 auto}.cut-sequence ol{max-width:100%}@media(max-width:1050px){.workspace{grid-template-columns:340px minmax(0,1fr)}.result{padding:28px 24px}.metrics article{padding:15px 13px}}@media(max-width:900px){.workspace{grid-template-columns:1fr}.controls{border-right:0}.result{padding:28px 20px}}@media(max-width:600px){.result-top{align-items:flex-start}.status{white-space:nowrap}.metrics{grid-template-columns:1fr}.metrics .primary-metric{grid-column:auto}.metrics article,.metrics article:nth-child(2){border-left:0}.plan-head{flex-direction:column}.plan-actions{width:100%;flex-direction:row;align-items:center;justify-content:space-between}.play-cuts{width:auto;padding:0 12px}.play-cuts span{display:block}.canvas-wrap{height:250px;padding:22px 30px 34px 39px}.plan-foot{grid-template-columns:1fr}.plan-foot div,.plan-foot div:first-child{border:0;border-top:1px solid var(--line);padding:8px 0;flex-direction:row;justify-content:space-between}.plan-foot div:first-child{border-top:0}.size-grid{grid-template-columns:repeat(2,minmax(0,1fr));padding-left:16px;padding-right:16px}.dialog-head,.size-tabs{padding-left:16px;padding-right:16px}.size-tabs{overflow-x:auto}.size-tabs button{flex:0 0 auto}.family-help{margin-left:16px;margin-right:16px}.dialog-foot{padding:10px 16px;align-items:flex-start;flex-direction:column}.dialog-foot button{width:100%}}@media(max-width:390px){.size-grid{grid-template-columns:1fr}.play-cuts span{display:none}.play-cuts{width:44px;padding:0}} /* readability.css */ @media(max-width:600px){.feasibility p,.sequence-status p{font-size:13px;line-height:1.55}.feasibility b,.sequence-status b{font-size:14px}.cut-sequence li{font-size:12px;min-width:120px}.cut-sequence li b{font-size:12px}.family-help{font-size:14px;line-height:1.55}.size-option span{font-size:12px}.selected-size>span:last-child{font-size:12px}} /* modes.css */ .mode-switch{max-width:760px;margin:0 auto 36px;padding:5px;display:grid;grid-template-columns:1fr 1fr;gap:5px;background:#e7e7e1;border:1px solid var(--line);border-radius:14px}.mode-switch button{min-width:0;min-height:68px;border:0;border-radius:10px;background:transparent;padding:10px 14px;display:flex;align-items:center;gap:11px;text-align:left;color:var(--muted);cursor:pointer}.mode-switch button.active{background:#fff;box-shadow:0 4px 14px rgba(30,45,36,.09);color:var(--ink)}.mode-switch svg{width:26px;height:26px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.7}.mode-switch span{min-width:0;display:flex;flex-direction:column}.mode-switch b{font-size:14px}.mode-switch small{font-size:10px;white-space:normal}.roll-only{display:grid;gap:14px}.roll-length-choice{display:grid;grid-template-columns:1fr 1fr;gap:7px}.roll-length-choice button{min-height:58px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--muted);font-weight:600;cursor:pointer}.roll-length-choice button small{display:block;margin-top:2px;font-size:10px;font-weight:400}.roll-length-choice button.active{border-color:var(--green);background:#eff6f0;color:var(--green)}.field-help{margin:0;color:var(--muted);font-size:11px}.roll-only .full-field input{margin-top:6px}.roll-only[hidden],.sheet-only[hidden]{display:none!important}@media(max-width:600px){.mode-switch{margin-bottom:25px}.mode-switch button{min-height:76px;padding:9px}.mode-switch svg{width:22px}.mode-switch b{font-size:13px}.mode-switch small{font-size:10px;line-height:1.3}} /* mode-states.css */ .feasibility.not-enough{border-color:#e7b7a4;background:#fff1eb}.feasibility.not-enough svg{background:#c8582a}.feasibility.not-enough p{color:#8b4b31} .feasibility .warn-mark{display:none}.feasibility.not-enough .ok-mark{display:none}.feasibility.not-enough .warn-mark{display:inline} /* quantity-first.css */ .metrics{grid-template-columns:repeat(3,minmax(0,1fr))}.metrics .primary-metric{background:#eff6f0}.metrics .primary-metric strong,.metrics strong{font-size:clamp(22px,2.4vw,29px)}.metrics .primary-metric strong{color:var(--green)}@media(max-width:600px){.metrics{grid-template-columns:1fr}.metrics article{grid-template-columns:1fr auto}.metrics .primary-metric{grid-column:auto}} /* workflow-options.css */ .quantity-presets{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;margin-top:8px}.quantity-presets button{min-height:38px;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--muted);font:600 11px "Roboto Mono";cursor:pointer}.quantity-presets button:hover,.quantity-presets button.active{border-color:var(--green);background:#eff6f0;color:var(--green)}.sheet-plan-switch{padding:12px 16px;border-bottom:1px solid var(--line);background:#f1f3ef;display:flex;gap:7px;overflow-x:auto}.sheet-plan-switch[hidden]{display:none}.sheet-plan-switch button{flex:0 0 auto;min-height:44px;border:1px solid var(--line);border-radius:8px;background:#fff;padding:7px 12px;text-align:left;color:var(--muted);cursor:pointer}.sheet-plan-switch button b{display:block;color:var(--ink);font-size:11px}.sheet-plan-switch button small{font-size:10px}.sheet-plan-switch button.active{border-color:var(--green);background:#e7f2e9}.metrics{grid-template-columns:repeat(4,minmax(0,1fr))!important}.metrics article:nth-child(4){border-left:1px solid var(--line)}@media(max-width:760px){.metrics{grid-template-columns:1fr 1fr!important}.metrics .primary-metric{grid-column:auto}.metrics article:nth-child(3){border-left:0}.quantity-presets{grid-template-columns:repeat(3,1fr)}}@media(max-width:420px){.metrics{grid-template-columns:1fr!important}.metrics article{border-left:0!important}} /* batch.css */ .batch-entry{margin-top:5px;padding-top:15px;border-top:1px solid var(--line)}.batch-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}.batch-head b{font-size:12px}.batch-head button{min-height:36px;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--green);padding:0 10px;font-weight:600;cursor:pointer}.batch-entry textarea{width:100%;resize:vertical;min-height:88px;border:1px solid var(--line);border-radius:8px;background:#fff;padding:10px 11px;font:500 12px/1.55 "Roboto Mono";color:var(--ink);outline:none}.batch-entry textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(47,138,97,.12)}.batch-entry>p{margin:5px 0 0;color:var(--muted);font-size:10px}.batch-entry .batch-error{color:#b4482a;font-size:11px;font-weight:600}.batch-switch{margin-top:11px}.batch-entry.has-error textarea{border-color:#c8582a;background:#fff7f3} /* report.css */ .report-dialog{width:min(620px,calc(100vw - 28px));max-height:calc(100dvh - 28px);padding:0;border:0;border-radius:18px;background:var(--card);box-shadow:0 25px 80px rgba(20,30,24,.32);overflow:auto}.report-dialog::backdrop{background:rgba(21,29,24,.58);backdrop-filter:blur(3px)}.report-dialog form{padding:24px}.report-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.report-head h2{margin:5px 0 0;font-size:24px}.report-head>button{flex:0 0 44px;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--ink);font-size:25px;cursor:pointer}.report-intro{margin:12px 0 20px;color:var(--muted);font-size:13px}.report-field{display:block;margin-top:15px;color:var(--ink);font-size:13px;font-weight:600}.report-field select,.report-field textarea,.report-field input{display:block;width:100%;margin-top:7px;border:1px solid var(--line);border-radius:9px;background:#fff;padding:11px 12px;color:var(--ink);font:400 16px/1.5 "Noto Sans TC",sans-serif;outline:none}.report-field select,.report-field input{min-height:48px}.report-field textarea{resize:vertical;min-height:120px}.report-field :focus{border-color:var(--green2);box-shadow:0 0 0 3px rgba(47,138,97,.13)}.report-state{display:flex;align-items:flex-start;gap:10px;margin-top:18px;padding:13px;border-radius:10px;background:#eff6f0;cursor:pointer}.report-state input{width:20px;height:20px;accent-color:var(--green)}.report-state span{display:flex;flex-direction:column}.report-state b{font-size:13px}.report-state small{margin-top:3px;color:var(--muted);font-size:11px}.report-preview{margin-top:12px;border:1px solid var(--line);border-radius:9px;background:#faf9f5;padding:10px 12px}.report-preview summary{cursor:pointer;color:var(--green);font-size:12px;font-weight:600}.report-preview pre{white-space:pre-wrap;overflow-wrap:anywhere;color:var(--muted);font:11px/1.6 "Roboto Mono",monospace}.report-notice{margin:12px 0 0;padding:10px 12px;border-radius:8px;background:#fff5e9;color:#995127;font-size:12px}.report-actions{display:grid;grid-template-columns:1fr 1.35fr;gap:9px;margin-top:18px}.report-actions button,footer button{min-height:48px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--green);padding:0 14px;font-weight:700;cursor:pointer}.report-actions .report-send{border-color:var(--green);background:var(--green);color:#fff}footer button{min-height:40px}footer button:hover,.report-actions button:hover{filter:brightness(.96)}@media(max-width:600px){.report-dialog{width:100%;max-width:none;max-height:92dvh;margin:auto 0 0;border-radius:18px 18px 0 0}.report-dialog form{padding:20px 16px max(20px,env(safe-area-inset-bottom))}.report-head h2{font-size:21px}.report-intro{font-size:14px}.report-state small{font-size:12px;line-height:1.5}.report-actions{grid-template-columns:1fr}.report-actions button{min-height:52px}footer button{width:100%;margin-top:7px}} /* multi-target.css */ .target-mode-switch{grid-template-columns:1fr 1fr;gap:7px;margin:0 0 15px}.target-mode-switch button{min-height:50px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--muted);font-weight:700;cursor:pointer}.target-mode-switch button.active{border-color:var(--green);background:#eff6f0;color:var(--green)}.quick-job-form{display:grid;grid-template-columns:1fr auto 1fr auto 86px;gap:6px;align-items:end}.quick-job-form label{position:relative;color:var(--muted);font-size:11px}.quick-job-form input{width:100%;height:44px;margin-top:5px;border:1px solid var(--line);border-radius:8px;padding:0 34px 0 9px;font:500 12px "Roboto Mono"}.quick-job-form label small{position:absolute;right:8px;bottom:12px}.quick-job-form>span{padding-bottom:11px;color:var(--muted)}.quick-job-form button{grid-column:1/-1;min-height:44px;border:0;border-radius:8px;background:var(--green);color:#fff;font-weight:700;cursor:pointer}.quick-help{margin:6px 0 10px;color:var(--muted);font-size:10px}.job-list{display:grid;gap:7px;margin:10px 0 13px}.job-list>p{margin:0;padding:13px;border:1px dashed var(--line);border-radius:8px;text-align:center;color:var(--muted);font-size:11px}.job-item{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:8px;padding:10px 11px;border:1px solid #b9d5c1;border-radius:8px;background:#eff6f0}.job-item b{font:600 12px "Roboto Mono"}.job-item span{font-size:11px;color:var(--green)}.job-item button{width:36px;height:36px;border:1px solid var(--line);border-radius:7px;background:#fff;color:#b4482a;font-size:18px;cursor:pointer}.batch-paste{border-top:1px solid var(--line);padding-top:10px}.batch-paste summary{cursor:pointer;color:var(--green);font-size:11px;font-weight:700}.batch-paste .batch-head{margin-top:10px}@media(max-width:390px){.quick-job-form{grid-template-columns:1fr auto 1fr}.quick-job-form label:nth-of-type(3){grid-column:1/2}.quick-job-form button{grid-column:2/4;align-self:end}.target-mode-switch button{padding:6px;font-size:12px}} .canvas-wrap.mixed-roll-wrap{height:min(70vh,680px);align-items:flex-start;overflow:auto}.canvas-wrap .mixed-roll{max-height:none;flex:none}.mixed-roll .cut-piece{font-size:clamp(7px,1vw,10px);display:flex;flex-direction:column;justify-content:center}.mixed-roll .cut-piece b{font-size:inherit}.mixed-roll .cut-piece small{position:static;color:inherit;font-size:max(6px,.8em);line-height:1.1}#productionQuantity[hidden],#quantityPresets[hidden]{display:none!important} /* layout-gallery.css */ .sheet-plan-switch{display:none!important}.intro>div>p{font-size:15px}.canvas-wrap{height:auto!important;min-height:330px;display:block;padding:22px 38px 38px;overflow-x:auto}.layout-alternatives{display:grid;gap:14px;margin-bottom:18px}.layout-alternatives[hidden]{display:none}.layout-preview,.current-layout{position:relative;min-width:0;min-height:300px;border:1px solid rgba(32,106,74,.2);border-radius:10px;background:rgba(255,253,248,.78);padding:42px 20px 28px;display:flex;justify-content:center;align-items:center;overflow:auto}.layout-caption{position:absolute;left:14px;top:10px;margin:0;color:var(--ink);font-size:12px;font-weight:700}.layout-caption small{margin-left:8px;color:var(--muted);font-weight:400}.layout-preview-canvas{position:relative;background:#e7e4db;border:2px solid var(--ink);box-shadow:4px 6px 0 #d1cec4;flex:0 0 auto}.current-layout #layoutCanvas{flex:0 0 auto}.current-layout .measure-w{bottom:8px}.current-layout .measure-h{left:5px}.canvas-wrap.has-multiple-layouts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:stretch}.has-multiple-layouts .layout-alternatives{display:contents}.has-multiple-layouts .layout-preview,.has-multiple-layouts .current-layout{min-height:330px;margin:0}.cut-line.first-preview{opacity:.55!important}.cut-line.vertical.first-preview{transform:scaleY(1)!important;background:repeating-linear-gradient(to bottom,var(--orange) 0 7px,transparent 7px 11px)}.cut-line.horizontal.first-preview{transform:scaleX(1)!important;background:repeating-linear-gradient(to right,var(--orange) 0 7px,transparent 7px 11px)}#layoutCanvas.roll-horizontal{max-width:none;background:linear-gradient(90deg,#e7e4db 0 92%,#efede5 100%);box-shadow:7px 7px 0 #d1cec4,22px 0 0 -7px #dedbd1}#layoutCanvas.roll-horizontal::after{content:"";position:absolute;right:-18px;top:-2px;width:32px;height:calc(100% + 4px);border:2px solid var(--ink);border-left-color:#b7b4aa;border-radius:50%;background:linear-gradient(90deg,#d6d3c9,#f2f0e8 48%,#c8c5bc);z-index:-1}.roll-horizontal-layout{padding-right:55px;overflow:visible}.roll-horizontal-wrap .measure-w{left:auto;right:5px;top:50%;bottom:auto;transform:translateY(-50%) rotate(90deg)}.roll-horizontal-wrap .measure-h{left:50%;top:auto;bottom:4px;transform:translateX(-50%)}@media(max-width:760px){.canvas-wrap.has-multiple-layouts{grid-template-columns:1fr}.layout-preview,.current-layout{min-height:300px}.has-multiple-layouts .layout-preview,.has-multiple-layouts .current-layout{min-height:300px}}@media(max-width:600px){.intro>div>p{font-size:13px}.canvas-wrap{padding:14px 10px 28px}.layout-preview,.current-layout{padding-left:10px;padding-right:10px}.layout-caption{font-size:11px}.roll-horizontal-layout{padding-right:42px}} /* support.css */ .support-dialog{width:min(480px,calc(100vw - 28px));padding:24px;border:0;border-radius:18px;background:var(--card);box-shadow:0 25px 80px rgba(20,30,24,.32)}.support-dialog::backdrop{background:rgba(21,29,24,.58);backdrop-filter:blur(3px)}.support-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.support-head h2{margin:5px 0 0;font-size:23px}.support-head>button{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:#fff;font-size:25px;cursor:pointer}.support-dialog>p{color:var(--muted);font-size:13px}.support-amounts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0}.support-amounts button{min-height:48px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--green);font-weight:700;cursor:pointer}.support-amounts button.active{border-color:var(--green);background:#eff6f0;box-shadow:0 0 0 2px rgba(47,138,97,.12)}.support-status{display:flex;flex-direction:column;gap:4px;padding:13px;border-radius:9px;background:#fff5e9;color:#995127}.support-status span{font-size:12px}.support-pay{width:100%;min-height:50px;margin-top:14px;border:0;border-radius:9px;background:#d9ddd9;color:#747b77;font-weight:700}.footer-actions{display:flex;gap:8px}.footer-actions #openSupport{border-color:#e8b382;color:#995127}@media(max-width:600px){.support-dialog{width:100%;max-width:none;margin:auto 0 0;border-radius:18px 18px 0 0}.footer-actions{width:100%;display:grid;grid-template-columns:1fr 1.5fr}.footer-actions button{margin-top:7px!important}} /* reuse-rule.css */ .calculation-rule{margin-top:13px;color:var(--muted);font-size:10px;line-height:1.5}.calculation-rule::before{content:"規則：";color:var(--green);font-weight:700}.roll-width-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:8px 0 14px}.roll-width-presets button{min-height:46px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);font-weight:700;cursor:pointer}.roll-width-presets button small{display:block;position:static;color:var(--muted);font:9px "Roboto Mono"}.roll-width-presets button.active{border-color:var(--green);background:#eff6f0;color:var(--green)}#requirementsHeading[hidden]{display:none}.options-only{padding-top:5px} /* roll-and-stack.css */ .roll-horizontal-wrap .measure-h{color:#c53f2f!important;font-size:14px!important;font-weight:800!important;background:#fff8f4;border:1px solid #efb4aa;border-radius:5px;padding:2px 7px;z-index:4}.sheet-stack{position:relative;width:280px;height:225px;display:grid;place-items:center;cursor:pointer}.sheet-stack .layout-preview-canvas{position:absolute;transform:translate(var(--stack-x),var(--stack-y)) rotate(var(--stack-angle));transition:transform .25s ease,filter .25s ease;transform-origin:bottom center}.sheet-stack:hover .layout-preview-canvas,.sheet-stack:focus .layout-preview-canvas{transform:translate(var(--fan-x),0) rotate(var(--fan-angle));filter:none}.stack-more{position:absolute;right:3px;bottom:0;border-radius:20px;background:var(--green);color:#fff;padding:4px 9px;font-size:10px;z-index:8}@media(max-width:600px){.sheet-stack{width:240px}} /* layout-choices.css */ .roll-width-line{display:grid;grid-template-columns:minmax(150px,1fr) auto;gap:8px;align-items:end}.roll-width-presets{display:flex!important;margin:0!important;gap:4px!important}.roll-width-presets button{min-width:54px;min-height:40px!important;padding:3px 6px;font-size:10px}.roll-width-presets button small{font-size:7px!important}.roll-length-check{display:flex;align-items:flex-start;gap:9px;margin:13px 0;color:var(--ink);cursor:pointer}.roll-length-check input{width:18px;height:18px;accent-color:var(--green)}.roll-length-check span{display:flex;flex-direction:column}.roll-length-check b{font-size:12px}.roll-length-check small{position:static;font-size:10px;color:var(--muted)}.roll-horizontal-wrap .measure-h{color:#c53f2f!important;font-size:12px!important;font-weight:800!important;background:transparent!important;border:0!important;padding:0!important}.sheet-count-visual{position:absolute;right:13px;bottom:12px;width:104px;height:80px;z-index:7;cursor:pointer}.sheet-count-visual i{position:absolute;right:calc(var(--sheet-index)*4px);bottom:calc(var(--sheet-index)*2px);width:44px;height:60px;border:1px solid var(--green);border-radius:3px;background:#f5fbf6;box-shadow:2px 2px 0 #d8ddd8;display:grid;place-items:center;color:var(--green);font:700 9px "Roboto Mono";transition:.2s}.sheet-count-visual:hover i{right:calc(var(--sheet-index)*8px);transform:rotate(calc((var(--sheet-index) - 4)*1deg))}.sheet-count-visual b{position:absolute;right:0;bottom:0;background:var(--green);color:#fff;border-radius:12px;padding:2px 6px;font-size:8px}.layout-choice-bar{display:flex;align-items:stretch;gap:7px;padding:10px 14px;border-top:1px solid var(--line);background:#f7f6f1;overflow-x:auto}.layout-choice-bar[hidden]{display:none}.layout-choice-bar>span{align-self:center;flex:0 0 auto;color:var(--muted);font-size:10px}.layout-choice-bar button{flex:0 0 auto;min-width:150px;border:1px solid var(--line);border-radius:8px;background:#fff;padding:7px 10px;text-align:left;cursor:pointer}.layout-choice-bar button b,.layout-choice-bar button small{display:block}.layout-choice-bar button b{font-size:11px}.layout-choice-bar button small{font-size:9px;color:var(--muted)}.layout-choice-bar button.recommended b{color:var(--green)}.layout-choice-bar button.active{border-color:var(--green);box-shadow:0 0 0 2px rgba(47,138,97,.1)}@media(max-width:600px){.roll-width-line{grid-template-columns:1fr}.roll-width-presets button{flex:1}.sheet-count-visual{right:5px;bottom:5px;transform:scale(.82);transform-origin:bottom right}} /* interaction-fixes.css */ .support-pay{background:var(--green)!important;color:#fff!important;cursor:pointer}.support-custom{display:block;margin:12px 0;color:var(--ink);font-size:12px;font-weight:600}.support-custom input{display:block;width:100%;min-height:46px;margin-top:5px;border:1px solid var(--line);border-radius:8px;padding:0 12px;font:600 16px "Roboto Mono"}.roll-width-presets button{min-width:67px!important;min-height:48px!important;padding:4px 8px!important;font-size:12px!important}.job-item{grid-template-columns:1fr auto auto!important}.job-quantity{display:flex;align-items:center;gap:5px}.job-quantity button{width:30px!important;height:30px!important;color:var(--green)!important;font-size:16px!important}.job-quantity span{min-width:34px;text-align:center} #rollLengthField[hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } .topbar-tools{display:flex;align-items:center;gap:18px}.language-picker{display:flex;align-items:center;gap:5px}.language-picker select{min-height:40px;border:1px solid var(--line);border-radius:8px;background:#fff;padding:0 28px 0 9px;color:var(--ink);font-size:13px}.language-picker span{font-size:16px} input, select, textarea, .metrics strong, .plan-foot b, .measure { font-variant-numeric: tabular-nums; } .metrics strong { white-space: nowrap; } .sheet-count-visual { right: 16px !important; bottom: 16px !important; width: 190px !important; height: 126px !important; outline: none; } .sheet-count-page { position: absolute; left: 50%; bottom: 8px; overflow: hidden; border: 2px solid var(--ink); background: #e7e4db; box-shadow: 4px 5px 0 rgba(30, 42, 35, .14); transform: translateX(calc(-50% + var(--stack-offset))) rotate(var(--stack-angle)); transform-origin: bottom center; transition: transform .25s ease, box-shadow .25s ease; } .sheet-count-page span { position: absolute; box-sizing: border-box; border: 1px solid var(--green); background: #cfe4d8; } .sheet-count-page em { position: absolute; right: 3px; bottom: 3px; min-width: 18px; height: 18px; border-radius: 10px; background: var(--green); color: #fff; display: grid; place-items: center; font: 700 9px "Roboto Mono"; font-style: normal; } .sheet-count-visual:hover .sheet-count-page, .sheet-count-visual:focus .sheet-count-page, .sheet-count-visual.expanded .sheet-count-page { transform: translateX(calc(-50% + var(--fan-offset))) rotate(0deg); box-shadow: 3px 4px 0 rgba(30, 42, 35, .1); } @media (max-width: 600px) { .topbar{padding-left:14px;padding-right:14px}.brand{font-size:16px}.topbar-tools{gap:4px}.language-picker span{display:none}.language-picker select{max-width:126px;min-height:44px;padding-left:8px;font-size:14px!important} input, select, textarea { font-size: 16px !important; } button, select, .job-quantity button, .job-item > button { min-height: 44px; } .job-quantity button, .job-item > button { width: 44px !important; height: 44px !important; } .switch-row, .roll-length-check { min-height: 44px; } .layout-choice-bar button { min-height: 52px; } .quick-help, .field-help, .plan-head p, .sequence-status p { font-size: 12px; line-height: 1.45; } .sheet-count-visual { right: 2px !important; bottom: 4px !important; transform: scale(.78) !important; } } /* Keep every roll-width preset inside the narrow settings column. */ .roll-width-line { grid-template-columns: minmax(0, 1fr); align-items: stretch; } .roll-width-presets { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; gap: 6px !important; margin: 8px 0 0 !important; } .roll-width-presets button { min-width: 0 !important; } /* dim-swap.css */ .dim-swap{align-self:flex-end;margin-bottom:11px;width:30px;height:30px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--muted);font-size:15px;line-height:1;cursor:pointer;transition:.2s} .dim-swap:hover{border-color:var(--green2);color:var(--green);transform:rotate(180deg)} /* remainder-highlight.css */ .remainder-highlight{position:absolute;border:2px dashed var(--orange);background:rgba(229,109,54,.08);display:flex;align-items:center;justify-content:center;text-align:center;pointer-events:none;padding:2px} .remainder-highlight b{font:700 10px "Roboto Mono";color:#995127;background:#fff5e9;border:1px solid #f4d5b3;border-radius:6px;padding:3px 6px;line-height:1.3} .layout-choice-bar button .remainder-size{display:block;font:700 13px "Roboto Mono";color:var(--orange);margin-top:2px} .layout-choice-bar button.recommended .remainder-size{color:var(--green)} /* scale-grid.css */ /* Measurable grid behind the paper (aligned by attachScaleGrid in app.js); replaces the decorative grid. */ .canvas-wrap{background-image:none} .scale-grid-panel{--major-line:rgba(31,58,46,.16);--minor-line:transparent;background-image:linear-gradient(to right,var(--major-line) 1px,transparent 1px),linear-gradient(to top,var(--major-line) 1px,transparent 1px),linear-gradient(to right,var(--minor-line) 1px,transparent 1px),linear-gradient(to top,var(--minor-line) 1px,transparent 1px);background-size:var(--grid-size,40px) var(--grid-size,40px),var(--grid-size,40px) var(--grid-size,40px),var(--minor-size,4px) var(--minor-size,4px),var(--minor-size,4px) var(--minor-size,4px);background-position:var(--grid-x,0) var(--grid-y,0),var(--grid-x,0) var(--grid-y,0),var(--grid-x,0) var(--minor-y,0),var(--grid-x,0) var(--minor-y,0)} .scale-grid-panel.scale-grid-fine{--minor-line:rgba(31,58,46,.055)} .scale-legend{position:absolute;right:14px;bottom:10px;display:flex;align-items:center;gap:6px;color:var(--muted);font:500 12px/1.4 "Roboto Mono",system-ui,sans-serif;white-space:nowrap;pointer-events:none} .scale-legend i{width:10px;height:10px;border:1px solid rgba(31,58,46,.45)} .has-cut-stepper .scale-legend{bottom:auto;top:12px} .layout-caption{max-width:calc(100% - 120px)} /* allowance.css */ /* 放數 input under the paper size, beside the grain setting, and its result summary. */ .allowance-settings{margin-top:4px;border-top:1px solid #d7ded6} #allowanceFields{padding:4px 0 6px} .allowance-help{margin:0 0 8px;color:var(--muted);font-size:13px;line-height:1.5} .allowance-settings .grain-choices{margin:0 0 10px;font-size:14px} .allowance-value{display:flex;align-items:center;gap:8px;font-size:14px} .allowance-value input{width:110px;min-height:44px;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font:400 16px/1.2 "Roboto Mono",system-ui,sans-serif;background:#fff;color:var(--ink)} @media(min-width:601px){.allowance-value input{font-size:14px}} .allowance-value input:focus-visible{outline:2px solid var(--green);outline-offset:2px} .allowance-summary{margin:0 0 16px;padding:14px 18px;border:1px solid rgba(32,106,74,.25);border-radius:10px;background:#f4f8f3} .allowance-summary h3{margin:0 0 8px;font-size:15px;font-weight:700;color:var(--green)} .allowance-summary dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px 16px;margin:0} .allowance-summary dt{font-size:12px;color:var(--muted)} .allowance-summary dd{margin:2px 0 0;font:700 17px/1.3 "Roboto Mono",system-ui,sans-serif;color:var(--ink)} .allowance-summary p{margin:10px 0 0;font-size:13px;line-height:1.6;color:#24513b} .allowance-value small{position:static!important;transform:none!important;margin:0;color:var(--muted);font-size:14px} /* index-overrides.css */ /* Moved from inline