/* 시안의 분위기를 유지하되 핵심 결과는 비교 보기와 함께 항상 화면 안에 둡니다. */
:root{--reviewH:54px;--persistentH:164px;scroll-padding-top:calc(var(--persistentH) + 18px)}
.review-bar{z-index:40}.sticky-summary{position:sticky;top:var(--reviewH);z-index:39;background:#102a23f5;border-bottom:1px solid #cbb47844;box-shadow:0 8px 22px #0002;backdrop-filter:blur(16px)}
.sticky-summary-inner{max-width:1284px;margin:0 auto;display:grid;grid-template-columns:1.1fr 1.1fr 1fr;gap:18px;padding:13px 24px 12px;container-type:inline-size}
.sticky-metric{min-width:0;display:flex;flex-direction:column;gap:4px;padding-left:20px;border-left:1px solid var(--line)}.sticky-metric:first-child{border-left:0;padding-left:0}.sticky-label{font-size:calc(11px * var(--fz));color:var(--muted);line-height:1.5;word-break:keep-all}.sticky-metric p{display:flex;gap:5px;align-items:baseline;min-width:0;font-size:calc(12px * var(--fz));line-height:1.05}.sticky-metric strong{font:500 calc(30px * var(--fz))/1.12 'Cormorant Garamond',Georgia,serif;font-variant-numeric:lining-nums tabular-nums;overflow-wrap:anywhere}.sticky-performance strong{color:var(--gold-bright)}.sticky-cost strong{font-size:calc(26px * var(--fz))}.sticky-metric p>span{color:var(--muted);flex:none}.sticky-footnote{font-size:calc(11px * var(--fz));color:var(--muted);line-height:1.5;word-break:keep-all}.sticky-cost .sticky-footnote{color:var(--gold-bright)}.sticky-update{grid-column:1/-1;font-size:calc(11px * var(--fz));line-height:1.6;color:var(--gold-bright);padding:7px 0 0;border-top:1px solid var(--line)}
.field-art>svg{display:block;width:100%;height:auto;position:relative;filter:drop-shadow(0 10px 16px #0002)}.field-art{min-width:0}.figure-coordinate{pointer-events:none}.quantity-readings{margin:13px auto 0;text-align:left;max-width:440px;border-top:1px solid var(--line);padding-top:12px}.quantity-tabs{display:flex;justify-content:space-between;align-items:center;gap:8px}.quantity-kicker{font-size:calc(11px * var(--fz));color:var(--gold);line-height:1.5;word-break:keep-all}#scene-toggle{border:1px solid var(--line);background:#cbb47809;padding:7px 9px;min-height:36px;font-size:calc(11px * var(--fz));white-space:nowrap}#scene-toggle span{margin-left:5px;color:var(--gold)}.quantity-pair{display:grid;grid-template-columns:1fr 1fr;margin-top:13px;gap:18px}.quantity-pair>div{min-width:0}.quantity-pair>div+div{border-left:1px solid var(--line);padding-left:18px}.quantity-pair span,.quantity-pair small{font-size:calc(11px * var(--fz));line-height:1.5;color:var(--muted)}.quantity-pair p{margin:5px 0 3px;font-size:calc(11px * var(--fz));color:var(--muted)}.quantity-pair strong{font:500 calc(29px * var(--fz))/1.1 'Cormorant Garamond',Georgia,serif;color:var(--ink);overflow-wrap:anywhere}.quantity-pair small{color:var(--faint)}.spray-process{margin-top:14px;padding:12px 0 0;border-top:1px solid var(--line)}.spray-process>div:first-child{display:flex;justify-content:space-between;gap:8px;align-items:baseline;font-size:calc(11px * var(--fz));color:var(--muted)}.spray-process strong{font-size:calc(11px * var(--fz));font-weight:500;color:var(--gold-bright);text-align:right;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.quantity-track{height:3px;margin-top:9px;background:#d49a5c20;overflow:hidden}.quantity-track i{display:block;height:100%;width:0;background:var(--orange)}.spray-process>p{font-size:calc(11px * var(--fz));line-height:1.6;color:var(--faint);margin-top:6px}.quantity-cumulative{margin-top:12px;display:grid;gap:6px}.quantity-cumulative>div{display:flex;gap:12px;justify-content:space-between;align-items:baseline;font-size:calc(11px * var(--fz));line-height:1.7}.quantity-cumulative dt{color:var(--muted);word-break:keep-all}.quantity-cumulative dd{color:var(--ink);font-variant-numeric:tabular-nums;text-align:right;overflow-wrap:anywhere;min-width:0}.scene-scale{margin-top:8px}.scene-scale summary{font-size:calc(11px * var(--fz));color:var(--muted);cursor:pointer;min-height:34px;padding:7px 0}.scene-scale p{font-size:calc(11px * var(--fz));line-height:1.8;color:var(--muted);word-break:keep-all;margin:3px 0 9px}.dose-instrument .instrument-heading{flex-wrap:wrap}.dose-instrument output{margin-left:auto}#quantity-scene{scroll-margin-top:calc(var(--persistentH) + 18px)}input,button,summary,#more-settings,.timeline{scroll-margin-top:calc(var(--persistentH) + 18px)}
.sticky-summary[data-compact=true] .sticky-summary-inner{max-width:390px;grid-template-columns:1fr 1fr;gap:9px 12px;padding:12px 20px 10px}.sticky-summary[data-compact=true] .sticky-metric{padding-left:12px}.sticky-summary[data-compact=true] .sticky-metric:first-child{padding-left:0}.sticky-summary[data-compact=true] .sticky-day{grid-column:1/-1;flex-direction:row;align-items:baseline;flex-wrap:wrap;border-left:0;border-top:1px solid var(--line);padding:8px 0 0;gap:5px 10px}.sticky-summary[data-compact=true] .sticky-day strong{font-size:calc(20px * var(--fz))}.sticky-summary[data-compact=true] .sticky-day .sticky-footnote{margin-left:auto;font-size:calc(11px * var(--fz))}.sticky-summary[data-compact=true] .sticky-cost strong{font-size:calc(22px * var(--fz))}.sticky-summary[data-compact=true] .sticky-performance strong{font-size:calc(27px * var(--fz))}
@container field (min-width:901px){.quarry-figure{max-width:500px}.quantity-readings{max-width:430px}.field-layout{grid-template-columns:230px minmax(0,1fr) 305px}.observation .model-notice{margin-top:10px}.day-reader{margin-top:12px}}
@container field (max-width:560px){.quantity-readings{margin-top:15px;width:100%}.quantity-pair{gap:12px}.quantity-pair>div+div{padding-left:12px}.quantity-pair strong{font-size:calc(26px * var(--fz))}.quantity-tabs{gap:8px}#scene-toggle{min-height:42px;padding:8px;font-size:calc(11px * var(--fz))}.spray-process>div:first-child{flex-wrap:wrap}.spray-process strong{margin-left:auto}.quantity-cumulative>div{gap:10px}.scene-scale summary{min-height:44px;padding-top:10px}.dose-instrument .instrument-heading{flex-wrap:nowrap}.quantity-readings~.day-reader{font-size:calc(11px * var(--fz));gap:7px}.quantity-readings~.day-reader .day-value strong{font-size:calc(22px * var(--fz))}}
@media(max-width:600px){.sticky-summary .sticky-summary-inner{grid-template-columns:1fr 1fr;gap:9px 12px;padding:11px 16px 9px}.sticky-summary .sticky-metric{padding-left:12px}.sticky-summary .sticky-metric:first-child{padding-left:0}.sticky-summary .sticky-day{grid-column:1/-1;flex-direction:row;align-items:baseline;flex-wrap:wrap;border-left:0;border-top:1px solid var(--line);padding:7px 0 0;gap:5px 10px}.sticky-summary .sticky-day strong{font-size:calc(20px * var(--fz))}.sticky-summary .sticky-day .sticky-footnote{margin-left:auto}.sticky-summary .sticky-cost strong{font-size:calc(22px * var(--fz))}.sticky-summary .sticky-performance strong{font-size:calc(27px * var(--fz))}.sticky-summary[data-compact=true] .sticky-summary-inner{padding-left:16px;padding-right:16px}}
.scene-key{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 14px;margin-top:11px;font-size:calc(11px * var(--fz));color:var(--muted);line-height:1.6}.scene-key>span{display:flex;align-items:center;gap:6px}.scene-key i{display:inline-block;width:12px;height:3px}.scene-key-spray{background:var(--orange)}.scene-key-effect{background:var(--teal)}.scene-speed{font-size:calc(11px * var(--fz));color:var(--faint);line-height:1.6;margin-top:5px}.cost-amount>span:first-child{white-space:normal;overflow-wrap:anywhere;max-width:100%;min-width:0}
@media print{.sticky-summary,#scene-toggle,.scene-scale,.quantity-track{display:none!important}.quantity-readings{break-inside:avoid}.field-art>svg{filter:none}}
/* 분진의 변화가 먼저 읽히도록 재생·전후 비교를 그림 바로 아래에 모읍니다. */
.quantity-tabs{display:grid;grid-template-columns:1fr 1fr;min-height:calc(33px * var(--fz));align-items:start;gap:12px}
#scene-effect-label{font-size:calc(11px * var(--fz));line-height:1.5;text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
.scene-key-dust{background:#b8b9a5}
.dust-controls{display:grid;grid-template-columns:1fr 1.45fr 1fr;gap:7px;margin:10px 0 15px}
.dust-controls button{min-height:42px;padding:9px 5px;border:1px solid var(--line);background:transparent;color:var(--muted);font-size:calc(11px * var(--fz));white-space:nowrap}
.dust-controls button[aria-pressed=true]{border-color:#cbb47899;background:#cbb47812;color:var(--gold-bright)}
.dust-controls #scene-toggle{border:1px solid #d6bc80;background:linear-gradient(120deg,#e4c78c,#c2a66e);color:#173025;font-size:calc(12px * var(--fz));font-weight:500;padding:9px 5px}
.dust-controls button:disabled{opacity:.45;cursor:default}
.dust-controls #scene-toggle:disabled{border-color:var(--line);background:transparent;color:var(--muted)}
.dust-progress-label{display:flex;justify-content:space-between;gap:12px;font-size:calc(11px * var(--fz));line-height:1.6;color:var(--muted)}
.dust-progress-label output{color:var(--gold-bright);min-width:5ch;text-align:right;font-variant-numeric:tabular-nums}
#scene-progress{height:25px;margin:2px 0 0}#scene-progress:disabled{opacity:.35;cursor:default}
.scene-speed{min-height:calc(35.2px * var(--fz));word-break:normal}
.scene-key{min-height:calc(35.2px * var(--fz))}
@container field (max-width:560px){.dust-controls button,.dust-controls #scene-toggle{min-height:44px}.dust-controls{gap:6px;margin-top:7px}#scene-progress{height:35px}.quantity-tabs{gap:8px}.quantity-kicker{word-break:normal}.scene-speed{min-height:calc(52.8px * var(--fz))}.scene-key{margin-top:10px}.scene-key>span:last-child{width:100%;justify-content:center}}
@media print{.dust-controls,.dust-progress-label,#scene-progress{display:none!important}}
.observation>.dust-controls{max-width:430px;width:100%;margin:18px auto 7px}
/* 숫자 자릿수가 늘어도 퍼센트 기호와 고정 요약의 줄바꿈 위치가 움직이지 않게 합니다. */
#scene-rate-value{display:inline-block;width:2.65em;text-align:right;font-variant-numeric:lining-nums tabular-nums}
#sticky-day-rate{display:inline-block;min-width:2.65em;text-align:right;font-variant-numeric:lining-nums tabular-nums}
.scene-live-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
