.calc{background:var(--s1);border:1px solid var(--s2);border-radius:var(--r-card);gap:28px;margin-top:32px;padding:clamp(20px,3vw,32px);display:grid}@media (width>=880px){.calc{grid-template:"in out""in side"1fr/minmax(0,1.1fr) minmax(0,1fr);align-items:start;column-gap:48px}.calc .calc-in{grid-area:in}.calc .calc-out{grid-area:out}.calc .calc-side{grid-area:side}}.calc .fields{grid-template-columns:1fr 1fr;gap:12px;display:grid}.calc .fields+.fields,.calc .fields+.seg,.calc .seg+.fields{margin-top:16px}.calc .field{min-width:0}.calc .field label,.calc .seg legend,.calc .lbl{font-size:var(--fs-sm);color:var(--t2);margin-bottom:8px;font-weight:600;display:block}.calc .stepper{background:var(--s2);border-radius:14px;align-items:center;min-height:52px;display:flex;overflow:hidden}.calc .stepper:focus-within{box-shadow:0 0 0 2px var(--orange)}.calc .stepper button{width:44px;height:52px;color:var(--t1);font:inherit;cursor:pointer;touch-action:manipulation;background:0 0;border:0;flex:none;font-size:22px}.calc .stepper button:hover{background:var(--s3)}.calc .stepper button:focus-visible{outline:2px solid var(--orange);outline-offset:-2px}.calc .stepper input{width:100%;min-width:0;height:52px;color:var(--t1);text-align:center;font-family:var(--font-num);background:0 0;border:0;outline:none;flex:1;font-size:20px;font-weight:700}.calc .box{background:var(--s2);border-radius:14px;align-items:center;min-height:52px;padding-inline:14px;display:flex}.calc .box:focus-within{box-shadow:0 0 0 2px var(--orange)}.calc .box input{width:100%;min-width:0;height:52px;color:var(--t1);font-family:var(--font-num);background:0 0;border:0;outline:none;flex:1;font-size:20px;font-weight:700}.calc .suffix{color:var(--t2);font-size:var(--fs-sm);flex:none;margin-left:-4px;padding-right:4px}.calc .box .suffix{margin-left:6px;padding-right:0}.calc .hint{font-size:var(--fs-sm);color:var(--t2);margin-top:8px;line-height:1.45}.calc [hidden]{display:none!important}.calc .seg{border:0;min-width:0;margin:20px 0 0;padding:0}.calc .seg-row{background:var(--s2);border-radius:14px;gap:4px;padding:4px;display:flex}.calc .seg label{flex:1;min-width:0;position:relative}.calc .seg input{opacity:0;cursor:pointer;margin:0;position:absolute;inset:0}.calc .seg span{min-height:44px;color:var(--t2);text-align:center;border-radius:10px;place-items:center;padding:4px 8px;font-weight:650;line-height:1.2;display:grid}.calc .seg.num span{font-family:var(--font-num);font-weight:700}.calc .seg input:checked+span{background:var(--s3);color:var(--t1)}.calc .seg input:focus-visible+span{box-shadow:0 0 0 2px var(--orange)}.calc .seg.unit .seg-row{max-width:200px}.calc .calc-in>.seg.unit:first-child{margin:0 0 16px}.calc .opts{gap:6px;display:grid}.calc .opts label{display:block;position:relative}.calc .opts input{opacity:0;cursor:pointer;margin:0;position:absolute;inset:0}.calc .opts .o{background:var(--s2);border:1px solid #0000;border-radius:14px;grid-template-columns:1fr auto;gap:2px 12px;padding:12px 14px;display:grid}.calc .opts .o b{font-weight:650}.calc .opts .o small{font-size:var(--fs-sm);color:var(--t2);grid-column:1;line-height:1.4}.calc .opts .o em{color:var(--t2);font-style:normal;font-size:var(--fs-sm);grid-area:1/2/span 2;align-self:center}.calc .opts input:checked+.o{border-color:var(--t2);background:var(--s3)}.calc .opts input:focus-visible+.o{box-shadow:0 0 0 2px var(--orange)}.calc .out-label{font-size:var(--fs-sm);color:var(--t2);align-items:center;gap:10px;font-weight:600;display:flex}.calc .dot{background:var(--orange);border-radius:50%;flex:none;width:10px;height:10px}.calc.is-empty .dot{background:var(--s3)}.calc .out-num{font-family:var(--font-num);font-size:clamp(48px,6vw,64px);font-weight:800;line-height:1.05;font-stretch:var(--stretch-title);letter-spacing:-.02em;margin-top:6px;display:block}.calc .out-unit{color:var(--t2);letter-spacing:0;font-size:.42em;font-weight:700}.calc .out-msg{max-width:34em;font-size:var(--fs-sm);color:var(--t1);margin-top:10px;line-height:1.5}.calc .out-line{font-size:var(--fs-sm);color:var(--t2);margin-top:6px;line-height:1.5}.calc .out-line:first-of-type{margin-top:10px}.calc .kv{gap:0;margin-top:16px;display:grid}.calc .kv div{border-top:1px solid var(--s2);justify-content:space-between;gap:16px;padding:9px 0;display:flex}.calc .kv dt{color:var(--t2);font-size:var(--fs-sm)}.calc .kv dd{text-align:right;margin:0;font-weight:650}.calc .calc-side table{border-collapse:collapse;width:100%}.calc .calc-side caption{text-align:left;margin-bottom:10px}.calc .t-title{font-weight:650;display:block}.calc .t-note{font-size:var(--fs-sm);color:var(--t2);margin-top:2px;line-height:1.45;display:block}.calc .calc-side th,.calc .calc-side td{text-align:right;border-top:1px solid var(--s2);font-size:var(--fs-md);padding:9px 12px;font-weight:500}.calc .calc-side thead th{font-size:var(--fs-xs);color:var(--t2);border-top:0;padding-top:0;font-weight:600}.calc .calc-side th:first-child{text-align:left;font-weight:600}.calc .calc-side td:last-child{color:var(--t2)}.calc .calc-side tr.on th,.calc .calc-side tr.on td{color:var(--t1);background:var(--s2)}.calc .calc-side tr.on th{box-shadow:inset 3px 0 0 var(--orange)}.calc .handoff{color:var(--t1);font-size:var(--fs-sm);text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:3px;align-items:center;gap:8px;margin-top:14px;font-weight:600;display:inline-flex}.calc-peek{left:12px;right:12px;bottom:max(12px, env(safe-area-inset-bottom,0px));z-index:30;background:var(--s2);border:1px solid var(--s3);min-height:52px;color:var(--t1);font:inherit;text-align:left;cursor:pointer;transition:transform .25s var(--ease-out), opacity .25s;border-radius:16px;align-items:center;gap:10px;padding:0 16px;display:flex;position:fixed;transform:translateY(0);box-shadow:0 12px 32px -8px #0009}.calc-peek[hidden]{opacity:0;pointer-events:none;display:flex;transform:translateY(140%)}.calc-peek .dot{background:var(--orange);border-radius:50%;flex:none;width:10px;height:10px}.calc-peek .pk-label{min-width:0;font-size:var(--fs-sm);color:var(--t2);white-space:nowrap;text-overflow:ellipsis;flex:1;overflow:hidden}.calc-peek .pk-val{font-family:var(--font-num);white-space:nowrap;font-size:20px;font-weight:800}@media (width>=880px){.calc-peek{display:none!important}}@media (prefers-reduced-motion:reduce){.calc-peek{transition:none}}.calc-example{font-size:var(--fs-sm);color:var(--t2);margin-top:20px}.calc-example[hidden]{display:none}@media (width<=480px){.calc{padding-inline:16px}.calc .calc-side th,.calc .calc-side td{font-size:var(--fs-sm);padding:8px 6px}.calc .calc-side th:first-child{overflow-wrap:anywhere;hyphens:auto}.calc .seg span{font-size:var(--fs-sm);hyphens:auto;overflow-wrap:anywhere;padding-inline:4px}}
